The Most Common Website Accessibility Issues (and How to Fix Them)

Nearly every website has accessibility problems, even those built by experienced design and development teams.

The latest annual WebAIM Million Report analysed the home pages of the world's top one million websites and found that almost 96% contained detectable WCAG failures (WCAG is an internationally recognized set of standards used to comply with the European Accessibility Act.)

The report isn't designed to name and shame organisations. Instead, it gives us a fascinating snapshot of the accessibility issues that continue to appear again and again across the web, and more importantly, what businesses can do to fix them.

What the WebAIM Million Report found

• 56,114,377 distinct accessibility errors detected

• An average of 56.1 errors per homepage

• 95.9% of home pages contained detectable WCAG 2 failures

• Automated testing alone suggests true WCAG conformance is likely well below 4.1% (because the methodology applied would only detect WCAG failures that could be identified through the use of automated tools)

  
  

What does this mean?

The statistics can sound overwhelming, but they tell us something surprisingly simple.

Accessibility problems aren't limited to poorly built websites. They're everywhere.

For millions of users, these issues create unnecessary barriers that make reading content, completing forms or making purchases much harder than they should be.

The encouraging part is that many of the most common issues are relatively straightforward to fix.

What can you do?

The WebAIM Million project identified six categories for the most common WCAG failures. 96% of all errors detected fall into these six categories, which have remained consistent for the last 7 years.

If you're looking for the biggest improvement with the least effort, start here.

1.        Carry out a manual accessibility audit to identify issues automated tools cannot detect.

2. Focus on the most common accessibility failures.

3. Create a ‘Design for All’ culture by helping designers and developers understand why they happen and their impact to users.

Let’s dig into some of the most common accessibility errors:

1.       Low contrast text

Many websites or mobile apps are designed to look ‘trendy’.

But using low contrast text colours like light grey against a white background, or coloured text on a coloured background makes text difficult to read for users with low visibility, colour blindness or users viewing the page in bright sunlight.

Imagine checking your banking app outdoors on a sunny day. If the designer has used pale grey text on a white background, even users with perfect vision may struggle to read it. Now consider someone with low vision or colour blindness. That small design choice becomes a genuine accessibility barrier.

The good news is that contrast issues are one of the few categories that automated accessibility scans can reliably detect.

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

2.       Missing or inadequate image alt text

Descriptive alt text for images enables screen readers to convey the meaning of images to partially sighted or blind users.

When an image lacks a text alternative, screen readers either skip it entirely or announce the file name, which is rarely useful.

Imagine a partially sighted or blind user is visiting your website. What story would they hear when presented with images, product photos, infographics etc. Would they be able to visualize what is displayed on the screen based on the description provided for the image? How accurate and detailed are the descriptions?

If you website or app uses product photos, infographics or charts, these should all include alt text descriptions. Alt text descriptions should be descriptive enough to be helpful when describing or explaining the meaning of the image to the user. Decorative images or images that add no informational value to users can use an empty alt attribute (e.g. alt=””) to allow assistive technology to ignore them.

This is one area where manual auditing is vital – no automated testing tool is going to be thorough enough to ensure your alt text is accurate or sufficiently descriptive for the image presented.

3.    Inadequate form labelling

Forms are usually used where you are asking a user to take an action: registration, sign in, providing their details when making a purchase etc. When form inputs lack adequate labels, screen readers announce them as “edit text” or “blank” with no indication of what information is expected in that input field.

Picture trying to complete an online purchase without being able to see the screen. You navigate through each of the form fields required to complete the purchase online. Every time you enter into a field, the screen reader announces “Edit text” with no indication of what information is expected for that input field. How would you know what information you are being asked to provide?

Simple changes such as adding descriptive text relevant to the form field in question are important e.g. “Enter your first name”. Placeholder text is not a substitute for adequate labelling because placeholder text disappears when a user begins typing, therefore, many assistive technologies do not treat placeholder text as an accessible name.

Therefore, for all forms used across your site, ensure they all include adequate labelling and clear instructions that would help assistive technology describe what is expected to the user.

This is another area where manual auditing is vital. Automated testing will likely pass where a form label exists, it will not be sophisticated enough to validate if the description of the form label is adequate for the context in which it is being requested.

4.    Headings

Headings are much more than larger, bold text. They're what screen readers use to understand the structure of a page.

Consider someone navigating your site using only a screen reader and keyboard. Their expectation is that every time they tab, the screen reader moves down the page in a logical sequence i.e. the same sequence that a sighted user would read the page based on how the information is presented to them on screen.

If you have incomplete or disorganized heading hierarchy, the screen reader will jump all over the screen, in an illogical order making it very difficult for a non-sighted user to follow and understand.

I actually discovered this while auditing my own website. Everything looked perfectly organised visually, but my screen reader jumped around the page because of the way repeaters had been implemented. It was a useful reminder that something which looks correct isn't always accessible. It also highlights the importance of a manual audit to identify issues that are not immediately obvious.

5.        Link text

Link text is the text that is read out by the screen reader to a partially sighted or blind user as they navigate your website.

Think about arriving on a webpage where every button sounds identical. You might be trying to figure out what services are provided. If every button on the services page has link text that says “Find out more”, how would you know which link to click on to find more information about the service you’re looking for? How would you know where you were going to be taken once you clicked on the link?

Descriptive link text help users to understand the context of the link, and should provide them with information on where the link might take them.

Closing thoughts...

The WebAIM Million Report reminds us that accessibility remains a challenge across the web, even for some of the world's most visited websites.

The encouraging news is that many of them are relatively straightforward to identify and fix. By understanding the barriers they create and building accessibility into your design and development process, you can make meaningful improvements for your users.

Better accessibility doesn't just support people with disabilities. It creates websites that are easier for everyone to use, improving usability, reducing frustration and often increasing conversions along the way.

If you’d like help identifying accessibility issues and usability opportunities for your website or mobile app, check out our Accessibility Audits and UX Design services pages for more information on how we can help you.