View source for Results of Bookmarklet Tests for Issue 78

[[Category: WCAG 2.1]]
[[Category: Issue 78]]

This page describes an evaluation of HTML web pages to [https://github.com/w3c/wcag21/issues/78 Adapting Text SC] metrics. [https://github.com/w3c/wcag21/issues/78#issuecomment-277743607 Alastair Campbell's Bookmarklet] automatically sets spacing to what is specified in the SC. That is:

# line height (line spacing) to at least 1.5 times the font size
# spacing underneath paragraphs to at least 2 times the font size
# letter spacing (tracking) to at least 0.12 times the font size
# word spacing to at least 0.16 times the font size 

Between July 25 and August 3, 2017, 67 pages were tested. They included top 50 Alexa pages and some smaller pages. The pages tested may have changed since that time.

== Testing Process ==

First a bookmark of a page was created and the URL was replaced with the following:

<code>javascript:(function()%7Bdocument.body.appendChild(document.createElement(%27script%27)).src%3D%27https://alastairc.uk/tests/layouts/text-adaptation.js%27%3B%7D)()%3B</code>

Then:

# Zoom level was set to 100%.
# Window size was set to 1280 pixels by 768 pixels. If the viewport not was at 1280 pixels wide due to scroll bars, the window was increased until viewport was 1280 pixels.
# The page to be tested was visited.
# The new bookmark was clicked (activated).

The following information was recorded:

* Spacing changes according to spec? (Pass/Fail)
* Loss of content or functionality? (Pass/Fail)
* Screenshot of the page was taken and it's link added to the table.

Optionally after running the initial test, some pages were tested at and 400%. That procedure was:

# Reload
# Zoom to 400%
# Test
# Document any zoom problems in the table

== Results == 

Please note: cells in the following Bookmarklet Data Table marked N/A means that the bookmarklet script refused to load. A header was sent that prevented the external script from running. This will not be a problem if/when the script is put into a proper extension, but it did prevent the bookmarklet from working for 6 test cases. In addition it will not be a problem for developers with local environments as they rarely have that header.
<table border="2">
<caption style="text-align:left;">Bookmarklet Data</caption>
    <tr>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Web Page Tested</th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Spacing changes according to spec? (Pass/Fail) </th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Loss of content or functionality? (Pass/Fail) </th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Testing Notes</th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Link to Screenshot</th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Comments</th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Date tested</th>
      <th scope="col" style="text-align:left; vertical-align:bottom;">Initials of person(s) testing</th>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.com Google.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Pass.</td>
      <td scope="row" style="text-align:left; vertical-align:top;">[[:File:Google_spacing_test.png|Google screenshot]]</td>
      <td style="vertical-align:top;">Rated #1 in Alexa top sites</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.youtube.com Youtube.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Pass.</td>
      <td scope="row" style="text-align:left; vertical-align:top;">[[:File:Youtube_spacing_test.png|Youtube screenshot]]</td>
      <td style="vertical-align:top;">Rated #2 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.facebook.com Facebook.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #3 in Alexa top sites.</td>
      <td style="vertical-align:top;">25-Jul-2017</td>
      <td style="vertical-align:top;">GLS</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Baidu.com Baidu.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">AA: Small failure - footer text is lost slightly.<br />
        Also tested at 400% - same problem at 100%</td>
      <td style="vertical-align:top;">[[:File:Baidu_spacing_test.png|Baidu screenshot]]</td>
      <td style="vertical-align:top;">Rated #4 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.wikipedia.org Wikipedia.org]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"> Actual page tested: [https://en.wikipedia.org/wiki/Main_Page  Wikipedia Main Page]</td>
      <td scope="row" style="text-align:left; vertical-align:top;">[[:File:Wikipedia_main_page_spacing_test.png|Wikipedia screenshot]]</td>
      <td style="vertical-align:top;">Rated #5 in Alexa top sites.</td>
      <td style="vertical-align:top;">25-Jul-2017</td>
      <td style="vertical-align:top;">GLS<br>
      LC</td>
  </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://en.m.wikipedia.org/w/index.php?title=Main_Page&amp;amp;mobileaction=toggle_view_mobile Wikipedia Mobile]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"><p>Also  tested at 400% - pass. <br />
        Actual page tested: [https://en.m.wikipedia.org/w/index.php?title=Main_Page&amp;mobileaction=toggle_view_mobile Wikipedia Mobile View]</p>      </td>
      <td scope="row" style="text-align:left; vertical-align:top;">[[:File:Wikipedia_mobile_spacing_test.png|Wikipedia mobile screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">AC</td>
  </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.yahoo.com Yahoo.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">AA: Text is cut off from the 'Featured Links' section. Also tested at 400% - Navigation content is lost.<br>
LC: Truncated text: In the heading &quot;NFL lineman decides to retire for unusual reason,&quot; the bottom portion</td>
      <td scope="row" style="text-align:left; vertical-align:top;">[[:File:Yahoo_spacing_test.png|Yahoo screenshot]]</td>
      <td style="vertical-align:top;">Rated #6 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017<br>
3-Aug-2017</td>
      <td style="vertical-align:top;">AA<br>
LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Qq.com Qq.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Text is cut off</td>
      <td style="vertical-align:top;">[[:File:Qq_top_spacing_test.png|Qq screenshot]]</td>
      <td style="vertical-align:top;">Rated #7 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.reddit.com Reddit.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Reddit_spacing_test.png|Reddit screenshot]]</td>
      <td style="vertical-align:top;">Rated #8 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Google.co.in Google.co.in]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_in_spacing_test.png|Google screenshot]]</td>
      <td style="vertical-align:top;">Rated #9 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.amazon.com Amazon.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Content overlaps</td>
      <td style="vertical-align:top;">[[:File:Amazon_spacing_test.png|Amazon screenshot]]</td>
      <td style="vertical-align:top;">Rated #10 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Taobao.com Taobao.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Navigation content is jumbled up</td>
      <td style="vertical-align:top;">[[:File:Taobao_top_spacing_test.png|Taobao screenshot]]</td>
      <td style="vertical-align:top;">Rated #11 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://twitter.com Twitter.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #12 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.co.jp Google.co.jp]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google.co.jp_spacing_test.png|Google.co.jp screenshot]]</td>
      <td style="vertical-align:top;">Rated #13 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.tmall.com Tmall.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - pass.</td>
      <td style="vertical-align:top;">[[:File:Tmall_top_spacing_test.png|Tmall screenshot]]</td>
      <td style="vertical-align:top;">Rated #14 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://vk.com Vk.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Vk_spacing_test.png|Vk screenshot]]</td>
      <td style="vertical-align:top;">Rated #15 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://live.com Live.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Live_spacing_test.png|Live screenshot]]</td>
      <td style="vertical-align:top;">Rated #16 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.sohu.com Sohu.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Sohu_top_spacing_test.png|Sohu screenshot]]</td>
      <td style="vertical-align:top;">Rated #17 in Alexa top sites.</td>
      <td style="vertical-align:top;">28-Jul-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.instagram.com Instagram.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - pass.</td>
      <td style="vertical-align:top;">[[:File:Instagram_spacing_test.png|Instagram screenshot]]</td>
      <td style="vertical-align:top;">Rated #18 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.sina.com.cn Sina.com.cn]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Sina_spacing_test.png|Sina screenshot]]</td>
      <td style="vertical-align:top;">Rated #19 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Google.de Google.de]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_de_spacing_test.png|Google DE screenshot]]</td>
      <td style="vertical-align:top;">Rated #23 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.co.uk Google.co.uk]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_uk_spacing_test.png|Google UK screenshot]]</td>
      <td style="vertical-align:top;">Rated #24 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.linkedin.com Linkedin.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">LC: LinkedIn Homepage sign in page passes for me.<br />
        AA: However, failure after signing in. The small 'New Connections' section had text that overlapped and overflowed. In order to avoid this the container needs to be able to expand so that the text can flow smoothly and freely within the container.</td>
      <td style="vertical-align:top;">[[:File:Linkedin_spacing_test.png|Linkedin screenshot]]</td>
      <td style="vertical-align:top;">Rated #25 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.com.br Google.com.br]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_br_spacing_test.png|Google BR screenshot]]</td>
      <td style="vertical-align:top;">Rated #27 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.fr Google.fr]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_fr_spacing_test.png|Google FR screenshot]]</td>
      <td style="vertical-align:top;">Rated #28 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.ru Google.ru]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Fails due to zoom</td>
      <td style="vertical-align:top;">[[:File:Google_ru_spacing_test.png|Google RU screenshot]]</td>
      <td style="vertical-align:top;">Rated #31 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;"><p>[https://www.Yandex.ru Yandex.ru]</p></th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #30 in Alexa top sites.</td>
      <td style="vertical-align:top;">28-Jul-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.com.hk Google.com.hk]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Google_hk_spacing_test.png|Google HK screenshot]]</td>
      <td style="vertical-align:top;">Rated #32 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.yahoo.co.jp Yahoo.co.jp]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Yahoo_jp_spacing_test.png|Yahoo JP screenshot]]</td>
      <td style="vertical-align:top;">Rated #33 in Alexa top sites.</td>
      <td style="vertical-align:top;">28-Jul-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr style='height:19px;'>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.it Google.it]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Text is cut off from 'Top Stories' - however doesn't affect usability<br>
        Actual page tested: [https://www.google.it/search?site=&amp;source=hp&amp;q=books&amp;oq=books&amp;gs_l=psy-ab.3..0l4.1109.2154.0.2255.5.5.0.0.0.0.136.493.3j2.5.0.foo%2Cersl%3D1%2Cfett%3D1%2Cewh%3D0%2Cnso-enksa%3D0%2Cnso-enfk%3D1%2Cnso-usnt%3D1%2Cnso-qnt-npqp%3D0-1%2Cnso-qnt-npdq%3D0-45%2Cnso-qnt-npt%3D0-09%2Cnso-qnt-ndc%3D300%2Ccspa-dspm-nm-mnp%3D0-045%2Ccspa-dspm-nm-mxp%3D0-1125%2Cnso-unt-npqp%3D0-15%2Cnso-unt-npdq%3D0-25%2Cnso-unt-npt%3D0-06%2Cnso-unt-ndc%3D300%2Ccspa-uipm-nm-mnp%3D0-0075%2Ccspa-uipm-nm-mxp%3D0-0525.3..0...1.1.64.psy-ab..0.5.492.J7Kiew8I1yE  Google Search results]</td>
      <td style="vertical-align:top;">[[:File:Google_it_books_searchresults_spacing_test.png|Google IT search results screenshot]]</td>
      <td style="vertical-align:top;">Rated #34 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
  </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://t.co T.co]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:T_spacing_test.png|T screenshot]]</td>
      <td style="vertical-align:top;">Rated #35 in Alexa top sites.</td>
      <td style="vertical-align:top;">28-Jul-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.ebay.com Ebay.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Ebay_spacing_test.png|Ebay screenshot]]</td>
      <td style="vertical-align:top;">Rated #36 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.es Google.es]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Google_es_spacing_test.png|Google ES screenshot]]</td>
      <td style="vertical-align:top;">Rated #37 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://imgur.com Imgur.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Imgur_spacing_test.png|Imgur screenshot]]</td>
      <td style="vertical-align:top;">Rated #39 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://Bing.com Bing.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Text above photos at bottom of page is truncated "..."</td>
      <td style="vertical-align:top;">[[:File:Bingr_spacing_test.png|Bing screenshot]]</td>
      <td style="vertical-align:top;">Rated #40 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.twitch.tv Twitch.tv]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Loss of content</td>
      <td style="vertical-align:top;">[[:File:Twitch_tv_spacing_test.png|Twitch TV screenshot]]</td>
      <td style="vertical-align:top;">Rated #41 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.msn.com Msn.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;"><p>AA: Loss of content.<br>
        LC: e.g. The text &quot;Name These 1950s&quot; is truncated in a sponsored card (Lucille Ball). Text should read &quot;Only A Few Americans Can Name These 1950s&quot;. Also occurs in &quot;Most Viewed&quot; and &quot;Trending Video&quot; sections.</p>      </td>
      <td style="vertical-align:top;">[[:File:Msn_spacing_test.png|MSN screenshot]]</td>
      <td style="vertical-align:top;">Rated #42 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017<br>
3-Aug-2017</td>
      <td style="vertical-align:top;">AA<br>
LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.alipay.com Alipay.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Actual page tested: [https://open.alipay.com/platform/home.htm?from=zhuzhan20160818 zhuzhan20160818]</td>
      <td style="vertical-align:top;">[[:File:Alipay_test.png|Alipay screenshot]]</td>
      <td style="vertical-align:top;">Rated #43 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
  </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.ca Google.ca]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Google_ca_spacing_test.png|Google CA screenshot]]</td>
      <td style="vertical-align:top;">Rated #44 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.tumblr.com Tumblr.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #45 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.google.com.mx Google.com.mx]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Google_mx_spacing_test.png|Google MX screenshot]]</td>
      <td style="vertical-align:top;">Rated #46 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.onclkds.com Onclkds.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Onclkds_spacing_test.png|Onclkds screenshot]]</td>
      <td style="vertical-align:top;">Rated #47 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://mail.ru Mail.ru]</th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #49 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.ok.ru Ok.ru]</th>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Refused to load the script.</td>
      <td style="vertical-align:top; color:#000; background-color:#efefef;">N/A</td>
      <td style="vertical-align:top;">Rated #50 in Alexa top sites.</td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.bbc.com BBC - Homepage]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Bbc_spacing_test.png|BBC screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://wellnessmama.com/2261/water-kefir-soda Wellness Mama: Water Kefir Recipe]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">[[:File:Wellness_mama_spacing_test.png|Wellness Mama screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">26-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.argos.co.uk Argos]</th>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">AA: Navigation text doesn't change. Loss of content. Also tested  at 400% - Same issue at 100%<br>
 LC: Text does not changing according to the SC's metrics in the mega menu.</td>
      <td style="vertical-align:top;">[[:File:Argos_nav_spacing_test.png|Argos screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017<br>
3-Aug-2017</td>
      <td style="vertical-align:top;">AA<br>
LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.boots.co.uk Boots]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Loss of content<br />
        Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Boots_spacing_test.png|Boots screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.nationalrail.co.uk National Rail]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Content overlaps<br />
        Also tested  at 400% - Same issue at 100%</td>
      <td style="vertical-align:top;">[[:File:Nationalrail_spacing_test.png|National Rail screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.bristolpost.co.uk Bristol Post]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Bristolpost_spacing_test.png|Bristol Post screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.birmingham.ac.uk University of Birmingham]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:U_birmingham_spacing_test.png|U Birmingham screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.iguanas.co.uk Las Iguanas]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Iguanas_spacing_test.png|Iguanas screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.three.co.uk Three]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested  at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:3_spacing_test.png|3 screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.leeds.gov.uk Leeds City Council]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Also tested at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Leeds_gov_spacing_test.png|Leeds gov screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.britishgas.co.uk British Gas]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">AA: Loss of content. Tested at 400% - Pass<br>
LC: Overlapping Text. e.g. the word &quot;complaints&quot; overlaps and obscures the text &quot;Want to know what we are doing.&quot; The word &quot;offers&quot; also overlays and obscures the text beneath it. It is unreadable.</td>
      <blockquote>&nbsp;	</blockquote>
      <td style="vertical-align:top;">[[:File:Britishgas_spacing_test.png|British Gas screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017<br>
3-Aug-2017</td>
      <td style="vertical-align:top;">AA<br>
LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.confused.com Confused.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">Tested at 400% - Pass</td>
      <td style="vertical-align:top;">[[:File:Confused_spacing_test.png|Confused screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">27-Jul-2017</td>
      <td style="vertical-align:top;">AA</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.adobe.com adobe.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Adobe_spacing_test.png|Adobe screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.bestbuy.com bestbuy.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Loss of content. Truncated text: &quot;See our recommendations&quot; is unreadable. Only the very top portion is visible.</td>
      <td style="vertical-align:top;">[[:File:Bestbuy_spacing_test.png|Bestbuy screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.cnn.com cnn.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:cnn_spacing_test.png|CNN screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.dnb.de dnb.de]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Deutsche_nationalbibliothek_spacing_test.png|Deutsche Nationalbibliothek screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://duluthgrill.com duluthgrill.com] </th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Duluthgrill_spacing_test.png|Duluth Grill screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.ens-lyon.fr ens-lyon.fr]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Loss of content.  Overlapping and truncated text.</td>
      <td style="vertical-align:top;">[[:File:Ecole_normale_superieure_spacing_test.png|Ecole Normale Supérieure de Lyon screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th style="text-align:left; vertical-align:top;" scope="row">[http://corporate.exxonmobil.com exxonmobil.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Exxonmobil_spacing_test.png|Exxon Mobil screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.foxnews.com foxnews.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#ffe7e7;">Fail</td>
      <td style="vertical-align:top;">Loss of content. Truncated text. e.g.  Only the very top portion of the Nasdaq percentage is visible.</td>
      <td style="vertical-align:top;">[[:File:foxnews_spacing_test.png|Fox News screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.northwestoutlet.com northwestoutlet.com]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Northwestoutlet_spacing_test.png|Northwest Outlet screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[http://www.npr.org npr.org]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Npr_spacing_test.png|NPR screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left; vertical-align:top;">[https://www.usa.gov usa.gov]</th>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top; color:#000; background-color:#33ff99;">Pass</td>
      <td style="vertical-align:top;">&nbsp;</td>
      <td style="vertical-align:top;">[[:File:Usa_gov_spacing_test.png|<span style="text-align:left; vertical-align:top;">USA.gov</span> screenshot]]</td>
      <td style="vertical-align:top;"></td>
      <td style="vertical-align:top;">3-Aug-2017</td>
      <td style="vertical-align:top;">LC</td>
    </tr>
</table>

== Discussion == 

Most pages passed the Adapting Text SC. However, some failed due to fixed-height CSS containers that caused text to overlap, truncate, or overflow containers. The following 14 web pages failed the SC.

# Argos
# Baidu
# Best Buy
# Boots
# Bing
# British Gas
# Ecole Normale Supérieure de Lyon
# Fox News
# MSN
# National Rail
# Qq
# Taobao
# Twitch
# Yahoo

=== Types of Failures ===

Types of failures include cut off text, overlapping text, and fixed that is unable to be overridden to the Success Criterion's metrics.

==== Example 1: Text Cut Off ====

The bottom portion of the words "Your Needs" is cut off in a heading making that text unreadable. It should read "We Provide a Mobile Application Service to Meet Your Needs."

'''Figure 1: Text cut off vertically is a failure.'''

<gallery mode="nolines" widths=420px heights=190px>
File:Spacing_cutoff_fail_vertical.png|alt=Heading text truncated vertically.
</gallery>


In Figure 2 the last portion of text is cut off in 3 side-by-side headings. The 1st heading should read "A cog in the wheel." But it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The 2nd heading should read "A penny for your thoughts". But it reads "A penny for your". The 3rd should read "Back to the drawing board." But it reads "Back to the drawi".

'''Figure 2: Text cut off horizontally is a failure.''' 

<gallery mode="nolines" widths=509px heights=184px>
File:Spacing_cutoff_fail_horizontal.png|alt=3 side-by-side headings with truncated text.
</gallery>

==== Example 2: Text Overlap ====

In Figure 3 the last 3 words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." But the words "You are invited to share ideas" are obscured and unreadable.

'''Figure 3: Overlapping text is a failure.'''

<gallery mode="nolines" widths=510px heights=170px>
File:Spacing_overlap_fail.png|alt=Heading text overlaps part of paragraph text.
</gallery>

==== Example 3: Fixed Text ====

Text fails the SC when it is fixed and not able to be overridden to the Success Criterion's metrics. 

Text that allows for overriding to the metrics passes. Line height must be able to adapt to 1.5 times the font size. Letter spacing must be able to adapt to 0.12 times the font size. Word spacing must be able to adapt to 0.16 times the font size. Spacing underneath paragraphs must be able to adapt to 2 times the font size.

'''Figure 4: Absolutely fixed text is a failure. Adaptable text passes.'''

<gallery mode="nolines" widths=731px heights=322px>
File:Spacing_side_by_side_comparison.png|alt=Spacing Fail/Pass side-by-side comparison.
</gallery>

== Conclusions ==

=== Most Sites Adapt Well ===

Overall most content on most sites adapt well. Based on this evaluation, the metrics specified in the [https://github.com/w3c/wcag21/issues/78 Adapting Text SC] should be feasible in WCAG 2.1 for HTML documents. Spacing is able to adapt without loss of content or functionality across a wide range of sites.

=== Techniques ===

A technique has been drafted, [[Allowing for Spacing Override]], to show how to test for the metrics set in this SC. 

Most or all of the issues found in this study could be solved by a technique (similar to [https://www.w3.org/TR/WCAG20-TECHS/C28.html C28: Specifying the size of text containers using em units]) to use min-height instead of height. To pass the [https://github.com/w3c/wcag21/issues/78 Adapting Text SC] containers must be able to expand. This can be done with technologies that use CSS by ensuring a min-height property is set rather than height. Setting a min-height ensures containers will always expand to 100%. And if needed, they can go past 100%.

== Evaluators ==

* Alastair Campbell
* Amani Ali
* Glenda Sims
* Laura Carlson

Special thanks to Amani for doing the lion's share of the testing and providing a first draft of the discussion section of this document.