Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Web Almanac 2021, Chapter 9: Accessibility

The Web Almanac is “HTTP Archive’s annual state of the web report”, which started in 2019. It is split into 24 chapters concerning all sorts of topics, such as security, CDNs, SEO, Jamstack, and Ecommerce. We’re going to concentrate on chapter 9 – Accessibility – which in itself is a long read.

Depressing statistics:

• Just 22% of sites have sufficient colour contrast; roughly unchanged from 2019 and 2020.
• 24% of desktop homepages, and 29% of mobile homepages, disable user zooming/scaling. This includes many of the top 1,000 sites globally.
• Around 69% of font sizes are set with px, as opposed to more scalable/accessible alternatives such as em.
• There’s a mixture of usage of HTML5 elements. Just 28% of sites have a <main> element, but around 62% have <header> and <nav> elements.
• Surprisingly, more than half of sites make use of tabindex attributes.
• Just 58% of sites have properly ordered headings, i.e. no levels skipped.
• We’re generally poor at creating accessible tables. Just 5% of sites which make use of tables provide a corresponding <caption> element.
• Almost a third of form inputs have no accessible name (i.e. no label). Around 58% of sites use a placeholder attribute, which is not very accessible to assistive technologies, and of these sites, nearly 65% had no label, implying that the placeholder is being improperly used as a label.
• Videos were found on 5% of sites. Of these, a corresponding <track> element – designed to have the same benefits as alt text for images – was found on less than 1% of videos. That said, “this figure may not account for video content loaded by a third party <iframe>, such as an embedded YouTube video”.

Positive statistics:

• 80.5% of sites have a lang attribute, with 99.7% of these being valid values.
• Surprisingly, almost 32% of sites use the prefers-reduced-motion media query; a relatively recent CSS addition.
• Less than 1% of pages make use of an accessibility overlay.

Interesting tidbits:

• 91% of desktop pages have :focus { outline: 0; } declared. “In some cases, it is removed so that a more effective custom style can be applied. In many cases it is simply removed and never replaced, which can render a page unusable for keyboard users”. The almanac doesn’t dig deeper on numbers though.
• Around 20% of sites are estimated to have a skip link (there’s no reliable automated test for this).
• CAPTCHAs were found on around 10% of sites. These are notoriously inaccessible.
• 18-19% of pages contain at least one anchor element with role="button". “A native <button> element would be a better choice, per the first rule of ARIA.”
• The most popular ARIA attribute is aria-hidden (used by 53% of sites), followed by aria-label (52%).
• 14.3% of pages have the class sr-only or visually-hidden on some elements, implying that they are providing text that is only visible to screen reader users.

The chapter concludes:

As an industry it is time that we acknowledge the story told by the numbers in this chapter; we are failing people with disabilities. The numbers from 2021 have not moved substantially from 2020. We need to do better, and this has to come from a combination of top-down leadership and investment (including the ongoing participation from browsers) and bottom-up effort to push our practices forward and advocate for the needs, safety and inclusion of people with disabilities using the web.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.