Design Domination Podcast Episode #175: 2024 State of Website Accessibility

Music: https://www.bensound.com

---

Since 2019, WebAIM has conducted an annual study where they evaluate the accessibility of home pages of the top 1 million websites using their WAVE tool.

The WebAIM Million

This was the first year where the way the sample sites were selected was slightly different. In previous years, they used what they called the “WebAIM Million.” This year, however, they used what is called the Tranco list. They only included domains that could be directly registered. They excluded subdomains, CDNs, image and data servers and APIs.

The State of Website Accessibility in 2024

WebAIM found that almost 96% of home pages had detectable WCAG 2 failures.

Remember: WAVE is an automated checker. In general, automated checkers can detect only about 25% to 30% of accessibility issues, and this can be more or it can be less depending on the checker being used and on the site. I mentioned this because it means that the accessibility of these sites is worse than their findings.

Since 2019, pages with WAVE failures did not even decrease by 2%.

WebAIM stated:

The proportion of pages with fewer errors has increased while the number of pages with many errors has also increased—pages with fewer errors have gotten better while pages with many errors have gotten worse.

Errors per Page

WebAIM defined errors as:

WAVE-detected accessibility barriers having notable end user impact, and which have a very high likelihood of being WCAG 2.2 Level A/AA conformance failures.

In the accessibility tests, WebAIM found an average of 56.8 accessibility errors per page! That is a lot.

Last year, there were 50 errors per page, so that number went up from last year. But between 2020 and 2021, there was a decline, then it was pretty steady until 2023, and this year it increased.

Home Page Complexity

The home pages they tested had—get this—almost 1,200 page elements! The number of home page elements increased by almost 12% in the past year and has increased every year since they started testing home pages in 2019.

Almost 5% of the home page elements had detectable accessibility errors, which means users with a disability could come across an error in 1 in every 21 of these home page elements.

The top 100,000 pages had an average of 1,424 errors.

Industries

WebAIM also revealed the industries of the websites they tested along with the average number of errors and percentage of difference (better or worse) compared with the average home page.

Some of the worst ones were:

• Sports,
• Real estate,
• Shopping,
• News/weather,
• Style/fashion,
• Travel,
• Automotive.

So if you’re looking for clients who need this type of work, those are some places to start.

Website Accessibility Errors

The majority of accessibility errors fell into six categories:

1. Low-contrast text,
2. Missing Alt-text,
3. Missing form input labels,
4. Empty hyperlinks,
5. Empty buttons,
6. Missing document language.

So let’s dive into some of the data found on them.

Low-contrast Text

One of the issues they checked for was low-contrast text.

Low-contrast text means that users with low vision or color blindness (and many users without a visual disability!) may not be able to read the text.

Like in years past, one of the most common WCAG 2 failures was low-contrast text, which was found on 81% of home pages. This has decreased for the most part since 2019, when it was about 85%.

Each home page that was tested had about 35 instances of low-contrast text. This was an increase from last year, which had an average of 30.4 instances.

Missing Alt-text

The next most frequently found error was Alt-text on images, found on 54.5% of home pages. This too has declined, for the most part, since 2019.

About 12 images per home page had missing Alt-text.

Almost half of those were linked images, which means that users of assistive technology could not tell what the link was for.

Almost 15% of images that had Alt-text had questionable or repetitive Alt-text, which isn’t helpful to someone who cannot see the images. So that means that users of assistive technology didn’t get content or understand some images that they should have.

Missing Form Input Labels

The number of form inputs (such as form fields) on home pages alone has almost doubled over the past five years.

Almost 49% of home pages had missing form input labels. This increased about 3% from last year.

Just over a third of form inputs were not labeled properly by use of the label tag, ARIA or a title attribute.

This is a problem because users of assistive technology will not be able to understand what each field is for: Do I put my first name here? Where do I put my email? What goes in this other field?

Empty Hyperlinks

Empty hyperlinks were another issue. Empty links are hyperlinks that lead to nowhere such as a pound sign as the only content or no link text.

This means that the purpose of the link will not be clear. This causes confusion, especially for screen reader users. Where will this link take me? Why should I click on it?

Empty hyperlinks were found on approximately 45% of pages. In 2019, it was as high as 58%.

Empty Buttons

Empty buttons were found on 28% of pages. This increased from last year.

So users of screen readers may not know what the button will do. If there is only one, they might assume it’s to submit a form, but what if there is a Reset button next to it?

What if the button is for search or to filter content? Buttons are used for a lot of different reasons.

These users will not understand its meaning.

Missing Document Language

About 17% of pages were missing a set document language. This has decreased almost every year. In 2019, it was as high as 33%.

Setting the document language is important for assistive technology. For instance, it tells screen readers which language to use, so the language will be voiced properly if the user has that language pack installed. It also helps with translation tools.

Other Accessibility Issues

Lack of or skipped headings

An average of 24 headings were found on home pages.

The number of headings on home pages decreased by 4%. I don’t know if that means more websites may have corrected uses of where headings shouldn’t have been used (such as body text that shouldn’t be a heading) or if they headings were not present where they should have been. Maybe mostly the latter and some of the former.

Almost 17% of home pages had multiple H1 tags.

There were skipped heading levels on almost 38% of home pages.

About 11% of home pages had no headings at all.

People who use screen readers use headings to scan the content of a web page and to navigate web pages quickly. Using headings accessibly is really important, so users of assistive technology can understand the page content and find what they need quickly. I talked about that in episode 164 on accessible headings.

ARIA errors

Almost 75% of home pages used ARIA, and ARIA errors averaged 89 per page.

There was a 26% increase in ARIA use over the previous year, and ARIA use has steadily increased since 2019.

Home pages that had ARIA code averages about 34% more errors than those not using ARIA code.

ARIA itself is not the issue. It’s usually misuse or incorrect ARIA.

Ambiguous hyperlinks

About 13% of home pages had ambiguous hyperlink text. Examples of this, which we see on most websites, are “read more” and “click here.” Fortunately, this decreased from the previous year.

Ambiguous hyperlinks are problematic because users of assistive technology will not be able to tell where a link goes or tell if it’s different from another link with the same link text on the page.

Lack of skip links

Only about 13% of home pages had a skip link, which was a decrease—no bueno.

I talked about the importance of skip links and how to add a skip link in episode 145.

Improperly coded tables

Properly coded tables were another issue that WebAIM found.

Only about 17% of the more than 1 million tables they encountered used valid table code.

Invalid table code means that users of assistive technology cannot understand the content of the table and how the data relates to each other.

What to Do With the WebAIM Data

OK, so now we have all this data. What does this mean? What should you do with this information?

Well, this information gives a good starting point for things to check and fix on existing and websites. I’ve also given you very brief explanations and examples of why too.

Fixing these issues won’t cover everything, of course. There is much more to do. But doing so is a great starting point and it will have big impact.

All data is copyright WebAIM.