Skip to content

Commit

Permalink
Migrate English chapter visualisations to new format (#511)
Browse files Browse the repository at this point in the history 
* First set of chapters

* Third set of chapters

* Forth set of chapters

* Improved descriptions for markup

* Better aria desc for compression and javascript chapters

* Better aria descriptions for CDN chapter

* Move javascript to base_chapter.html and update all chapter timestamps

* Fix typo

* Bug fix + static image a11y updates

* Better a11y descriptions for static images.

* Mis fixes from #527

* Change date ot UTC date

* Put in changes from #533

* Update dates

* Generate Accessibility Chapter
  • Loading branch information
@tunetheweb
tunetheweb authored Nov 25, 2019
1 parent c02b6d5 commit 8470bed
Show file tree
Hide file tree
Showing 48 changed files with 1,527 additions and 1,808 deletions.
28 changes: 14 additions & 14 deletions src/content/en/2019/accessibility.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ authors: [nektarios-paisios, obto, kleinab]
reviewers: [ljme]
discuss: 1764
published: 2019-11-11T00:00:00.000Z
last_updated: 2019-11-15T12:00:00.000Z
last_updated: 2019-11-23T00:00:00.000Z
---

## Introduction
Expand Down Expand Up @@ -36,9 +36,10 @@ In order to make sure your website is readable under these conditions, making su

<figure>
<a href="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png">
<img alt="Figure 1. Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook." src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" width="600">
<img alt="Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook" aria-labelledby="fig1-caption" aria-describedby="fig1-description" src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" width="600">
</a>
<figcaption>Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook</figcaption>
<div id="fig1-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook.</div>
<figcaption id="fig1-caption">Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook</figcaption>
</figure>

Only 22.04% of sites gave all of their text sufficient color contrast. Or in other words: 4 out of every 5 sites have text which easily blends into the background, making it unreadable.
Expand All @@ -63,7 +64,7 @@ Sadly, developers have misused this so much that almost one out of every three s
<a href="/static/images/2019/09_Accessibility/fig2.png">
<img src="/static/images/2019/09_Accessibility/fig2.png" alt="Figure 2. Percentage of sites that disable zooming and scaling vs device type." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=2053904956&amp;format=interactive">
</a>
<div id="fig2-description" class="visually-hidden">Vertical grouped bar chart titled "Are zooming and scaling enabled?" measuring percentage data, ranging from 0 to 80 in increments of 20, vs. the device type, grouped into desktop and mobile. Desktop enabled: 75.46%; Desktop disabled 24.54%; Mobile enabled: 67.79%; Mobile disabled: 32.21%.</div>
<div id="fig2-description" class="visually-hidden">Vertical measuring percentage data, ranging from 0 to 80 in increments of 20, vs. the device type, grouped into desktop and mobile. Desktop enabled: 75.46%; Desktop disabled 24.54%; Mobile enabled: 67.79%; Mobile disabled: 32.21%.</div>
<figcaption id="fig2-caption">Figure 2. Percentage of sites that disable zooming and scaling vs device type.</figcaption>
</figure>

Expand Down Expand Up @@ -121,7 +122,7 @@ With that being said, here are our results:
<a href="/static/images/2019/09_Accessibility/fig3.png">
<img src="/static/images/2019/09_Accessibility/fig3.png" alt="Figure 3. Popularity of heading levels." aria-labelledby="fig3-caption" aria-describedby="fig3-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-crolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=1123601243&amp;format=interactive">
</a>
<div id="fig3-description" class="visually-hidden">Vertical bar chart titled "% of sites using each heading" measuring percentage data, ranging from 0 to 80 in increments of 20, vs. bars representing each heading level h1 through h6. H1: 63.25%; H2: 67.86%; H3: 58.63%; H4: 36.38%; H5: 14.64%; H6: 6.91%.</div>
<div id="fig3-description" class="visually-hidden">Vertical bar chart measuring percentage data, ranging from 0 to 80 in increments of 20, vs. bars representing each heading level h1 through h6. H1: 63.25%; H2: 67.86%; H3: 58.63%; H4: 36.38%; H5: 14.64%; H6: 6.91%.</div>
<figcaption id="fig3-caption">Figure 3. Popularity of heading levels.</figcaption>
</figure>

Expand All @@ -135,7 +136,7 @@ We found only one in every four pages (26.03%) include a main landmark. And surp
<a href="/static/images/2019/09_Accessibility/fig4.png">
<img src="/static/images/2019/09_Accessibility/fig4.png" alt="Figure 4. Percent of pages by their number of 'main' landmarks." aria-labelledby="fig4-caption" aria-describedby="fig4-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=1420590464&amp;format=interactive">
</a>
<div id="fig4-description" class="visually-hidden">Vertical bar chart titled "Number of “main" landmarks per page” displaying percentage data, ranging from 0 to 80 in increments of 20, vs. bars representing the number of “main” landmarks per page from 0 to 4. Source: HTTP Archive (July 2019). Zero: 73.97%; One: 17.97%; Two: 7.41%; Three: 0.15%; 4: 0.06%.</div>
<div id="fig4-description" class="visually-hidden">Vertical bar chart displaying percentage data, ranging from 0 to 80 in increments of 20, vs. bars representing the number of “main” landmarks per page from 0 to 4. Source: HTTP Archive (July 2019). Zero: 73.97%; One: 17.97%; Two: 7.41%; Three: 0.15%; 4: 0.06%.</div>
<figcaption id="fig4-caption" >Figure 4. Percent of pages by their number of "main" landmarks.</figcaption>
</figure>

Expand All @@ -153,7 +154,7 @@ All of these elements are primarily designed for accessibility support and have
<a href="/static/images/2019/09_Accessibility/fig5.png">
<img src="/static/images/2019/09_Accessibility/fig5.png" alt="Figure 5. Usage of various HTML semantic elements." aria-labelledby="fig5-caption" aria-describedby="fig5-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=708035719&amp;format=interactive">
</a>
<div id="fig5-description" class="visually-hidden">Figure 5. Horizontal bar chart titled "usage of semantic elements" with bars for each element type vs percent of pages ranging from 0 to 60 in increments of 20. nav: 53.94%; header: 54.82%; footer: 55.92%; main: 18.47%; aside: 16.99%; article: 22.59%; hr: 19.1%; section: 36.55%.</div>
<div id="fig5-description" class="visually-hidden">Horizontal bar chart with bars for each element type vs percent of pages ranging from 0 to 60 in increments of 20. nav: 53.94%; header: 54.82%; footer: 55.92%; main: 18.47%; aside: 16.99%; article: 22.59%; hr: 19.1%; section: 36.55%.</div>
<figcaption id="fig5-caption" >Figure 5. Usage of various HTML semantic elements.</figcaption>
</figure>

Expand All @@ -165,7 +166,7 @@ Many popular screen readers also allow users to navigate by quickly jumping thro
<a href="/static/images/2019/09_Accessibility/fig6.png">
<img src="/static/images/2019/09_Accessibility/fig6.png" alt="Figure 6. Other HTML elements used for navigation" aria-labelledby="fig6-caption" aria-describedby="fig6-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=389034849&amp;format=interactive">
</a>
<div id="fig6-description" class="visually-hidden">Figure 6. Horizontal bar chart titled "other HTML elements used for navigation" with bars for each element type vs percent of pages ranging from 0 to 100 in increments of 25. a: 98.22%; ul: 88.62%; input: 76.63%; iframe: 60.39%; button: 56.74%; select: 19.68%; textarea: 12.03%.</div>
<div id="fig6-description" class="visually-hidden">Horizontal bar chart with bars for each element type vs percent of pages ranging from 0 to 100 in increments of 25. a: 98.22%; ul: 88.62%; input: 76.63%; iframe: 60.39%; button: 56.74%; select: 19.68%; textarea: 12.03%.</div>
<figcaption id="fig6-caption">Figure 6. Other HTML elements used for navigation.</figcaption>
</figure>

Expand All @@ -177,9 +178,10 @@ If you'd like to see a skip link in action for yourself, you can! Just do a quic

<figure>
<a href="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png">
<img alt="Figure 7. Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads 'A skip link on google.com'." src="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" width="600">
<img alt="Figure 7. What a skip link looks like on google.com." aria-labelledby="fig7-caption" aria-describedby="fig7-description" src="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" width="600">
</a>
<figcaption>Figure 7. What a skip link looks like on google.com.</figcaption>
<div id="fig7-description" class="visually-hidden">Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads 'A skip link on google.com'.</div>
<figcaption id="fig7-caption">Figure 7. What a skip link looks like on google.com.</figcaption>
</figure>

It's hard to accurately determine what a skip link is when analyzing sites. For this analysis, if we found an anchor link (`href=#heading1`) within the first 3 links on the page, we defined this as a page with a skip link. So 14.19% is a strict upper bound.
Expand Down Expand Up @@ -226,7 +228,7 @@ Using ARIA correctly and appropriately can be challenging. For example, of pages
<a href="/static/images/2019/09_Accessibility/fig8.png">
<img src="/static/images/2019/09_Accessibility/fig8.png" alt="Figure 8. Percent of total pages vs ARIA attribute." aria-labelledby="fig8-caption" aria-describedby="fig8-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=792161340&amp;format=interactive">
</a>
<div id="fig8-description" class="visually-hidden">Vertical bar chart titled "Percent of total pages vs ARIA attribute" displaying percentage data, ranging from 0 to 25 in increments of 5, vs. bars representing each attribute. Aria-hidden: 23.46%, aria-label: 17.67%, aria-expanded: 8.68%, aria-current: 7.76%, aria-labelledby: 6.85%, aria-controls: 3.56%, aria-haspopup: 2.62%, aria-invalid: 2.68%, aria-describedby: 1.69%, aria-live: 1.04%, aria-required: 1%</div>
<div id="fig8-description" class="visually-hidden">Vertical bar chart displaying percentage data, ranging from 0 to 25 in increments of 5, vs. bars representing each attribute. Aria-hidden: 23.46%, aria-label: 17.67%, aria-expanded: 8.68%, aria-current: 7.76%, aria-labelledby: 6.85%, aria-controls: 3.56%, aria-haspopup: 2.62%, aria-invalid: 2.68%, aria-describedby: 1.69%, aria-live: 1.04%, aria-required: 1%</div>
<figcaption id="fig8-caption" >Figure 8. Percent of total pages vs ARIA attribute.</figcaption>
</figure>

Expand All @@ -240,7 +242,7 @@ Currently, 46.91% of pages use at least one ARIA role attribute. In Figure 9 bel
<a href="/static/images/2019/09_Accessibility/fig9.png">
<img src="/static/images/2019/09_Accessibility/fig9.png" alt="Figure 9. Top 10 aria roles." aria-labelledby="fig9-caption" aria-describedby="fig9-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=176877741&amp;format=interactive">
</a>
<div id="fig9-description" class="visually-hidden">Figure 9. Horizontal bar chart titled "percent of pages using role" with bars for each role type vs percent of sites using ranging from 0 to 25 in increments of 5. Navigation: 20.4%; search: 15.49%; main: 14.39%; banner: 13.62%; contentinfo: 11.23%; button: 10.59%; dialog: 7.87%; complementary: 6.06%; menu: 4.71%; form: 3.75%</div>
<div id="fig9-description" class="visually-hidden">Horizontal bar chart with bars for each role type vs percent of sites using ranging from 0 to 25 in increments of 5. Navigation: 20.4%; search: 15.49%; main: 14.39%; banner: 13.62%; contentinfo: 11.23%; button: 10.59%; dialog: 7.87%; complementary: 6.06%; menu: 4.71%; form: 3.75%</div>
<figcaption id="fig9-caption" >Figure 9. Top 10 aria roles.</figcaption>
</figure>

Expand Down Expand Up @@ -300,5 +302,3 @@ Once a website is built, it's often hard to retrofit accessibility on top of exi
While not conclusive, our results indicate that the use of accessibility standards like ARIA and accessibility best practices (e.g., using alt text) are found on a *sizable, but not substantial* portion of the web. On the surface this is encouraging, but we suspect many of these positive trends are due to the popularity of certain UI frameworks. On one hand, this is disappointing because web developers cannot simply rely on UI frameworks to inject their sites with accessibility support. On the other hand though, it's encouraging to see how large of an effect UI frameworks could have on the accessibility of the web.

The next frontier, in our opinion, is making widgets which are available through UI frameworks more accessible. Since many complex widgets used in the wild (e.g., calendar pickers) are sourced from a UI library, it would be great for these widgets to be accessible out of the box. We hope that when we collect our results next time, the usage of more properly implemented complex ARIA roles is on the rise—signifying more complex widgets have also been made accessible. In addition, we hope to see more accessible media, like images and video, so all users can enjoy the richness of the web.

<script src='/static/js/chapter.js' defer></script>
Loading

0 comments on commit 8470bed

Please sign in to comment.