Spoilers: Not good things.
Even though the WebAIM Million analysis came out in February 2019, I found nothing on it reported here on dev.to, and this has been in my drafts for about a week. But I'm posting this now, because yesterday I saw a twitter poll by @amber1y with some sad numbers about it's reach. Front-End professionals need to know about the state of their web.
Do you remember 2008? A possibly simpler time, I myself was young teenager years old. I was still in total awe of all the things the iPhone, purchased by my father on Day 1, could do. From what I have read about web development at the time, it seems drastically simpler. The devices being made for were still primarily desktops, things like progressive enhancement had yet to be realized, IE 7 was browser du jour.
2008 is when WCAG 2.0 standards were finalized.
Please keep that in mind as you follow along with me on looking through what is probably the most depressing set of web statistics I have ever seen. My passion almost from day 1 of my education has been accessibility, and this has me and many others somber and introspective.
What, you might ask, could possibly warrant a response like this?
Well, to start, "97.8% of home pages had detectable WCAG 2 failures".
Nearly NINETY EIGHT PERCENT of the top 1 million home pages live today have detectable failures.
NINETY EIGHT
If you've ever used Lighthouse Accessibility audits or similar tools, you know that detectable issues tell only a portion of a websites accessibility story. So this is the benefit-of-the-doubt, best-case-scenario data; what their WAVE API could detect doesn't begin to tell the full story.
Here's some depressing highlights!
Low contrast text, below WCAG 2 AA, was the most common accessibility issue detected. Bear in mind there's a WCAG AAA standard as well, so this isn't the highest contrast standard. 85.3% of home pages analyzed had detectable WCAG contrast failures. On average, home pages had 36 distinct instances of text with insufficient contrast.
33.6% of all images (12.3 per page on average) had missing alternative text (not counting alt=""). 16.8% of those that did, had meaningless alt text.
59% of the 3.4 million form inputs identified were unlabeled (either via < label >, aria-label, or aria-labelledby).
One in every 20 headings was improperly structured. Skipped headings were present on 36.3% of all pages. 14.9% had no headings present at all.
Home pages with ARIA present averaged 11.2 more detectable errors than pages without ARIA.
There's a total of over 1.3 million ambiguous links in the sample.
Pages with a valid HTML5 doctype had significantly more page elements and errors than those with other doctypes.
Squarespace and Wix are the CMS' with the fewest accessibility issues. That's right, Joe Random who throws together a site in 30 minutes likely has a more accessible site than you!
Excepting two frameworks, MooTools and TweenMax, home pages with JS frameworks have more errors than pages without.
(No, we're not done yet!)
Home pages with jQuery averaged 19.2 more errors than those without jQuery. Lazy.js had a staggering 235% increase of errors! Thankfully this only constitutes 1.6% of homepages, but I could write to the moon about the irony in a library called "Lazy" being so chock full of issues.
There is a strong correspondence of increased errors when Bootstrap, animate.css, or Laravel is present.
Home pages that utilize the very common Google AdSense system had 47.2 more errors on average, nearly double, than other pages!
Despite being 2019, 11,200 home pages had and 570 home pages had blinking content ( or CSS text-decoration:blink). internally screaming
2,099,665 layout tables were detected compared to only 113,737 data tables. Oof. This means a crazy amount of data is hard, if not impossible, to digest by specific users.
Now, I'm not now, nor have ever been employed in this industry. I understand through the 9 months of self-taught education I have that this is a huge, multi-discipline issue. However, this is a pressing issue. The amount of users who are omitted from internet content on a daily basis is staggering, and I promise you that members of this population are not strangers to you. Even if they are, that shouldn't matter. This is not conducive to the free and open internet it should be.
On behalf of me and so many others, please look into these issues. Take a look at what Lighthouse or the Level Access Auditor says about your sites. Ask questions, get feedback, try some assistive technologies yourself! Try and keep the fact that we haven't reached a 3% implementation rate an 11 year old standard the next time you reach for yet another pretty piece of tech.
Cover image credit to Travis Saylor @pexels
Top comments (2)
If you’re a front-end dev, installing the WAVE extension for Firefox or Chrome helps tremendously to find accessibility issues.
Even without that, it’s basic craftmanship than to know how to validate your generated HTML to spot common issues. Just because we write templates for JS frameworks doesn’t mean the output cannot/shouldn’t be validated.
Yea, it’s impossible to understand someone until you walk in their shoes. I ran an a11y guild at a previous company and it was fun to watch coworkers experience WAVE or VoiceOver with our company website just so watch their empathy grow. I swear that the experience of struggling through the screen reader was the most convincing push to start at least adding alt-text. You gotta start somewhere.