Web accessibility: 6 most common failures

In their 2022 report on accessibility (after reviewing the top 1 million home pages), WebAIM listed the following failures as the most common types:

Did you know that 96.5% of the failures found were in these six categories. By fixing these failures on your website, you will greatly increase its accessibility.

Low contrast

This was the most commonly detected accessibility issue. It’s important to provide enough contrast between text and its background for users with moderately low vision.

Note: Decorative text that conveys no information is excluded for this criterion.

Based on their data:

  • On average, each home page had 31.6 instances of low-contrast test.

How to fix

In WCAG 2, contrast is a measure of the difference in perceived “luminance” or brightness between two colours. This brightness difference is expressed as a ratio ranging from 1:1 (e.g., white on white) to 21:1 (e.g., black on a white).

Recommended Contrast Ratio
• Text or images of text4.5:1

• Large text and images of large-scale text
3:1
Exceptions:
• Text or images that are
* part of an inactive UI component,
* purely decorative
* not visible
* part of a picture that contains significant other visual content, or
* text that is part of a logo or brand name
no contrast requirement

References / Tools

Missing alternative text for images

Alternative (Alt) text is a textual substitute for non-textual content on web pages.

Based on their data:

  • 23.2% of all home pages (9.2 per page on average) had missing alternative text (not including alt=” “)
  • Over one third of the images on popular home pages have missing, questionable, or repetitive alternative text.

How to fix

  • Use alternative text (alt text) which is added within an html code to describe the appearance or function of an image.
  • The alt text should be accurate and equivalent in representing the content and function of the image.
  • Keep it short and don’t include words like “image of,” “graphic representing,” etc.
  • Don’t duplicate the same textual information near the image (avoid redundancy)

References

An empty link means that it’s empty or contains no text describing where the link will go if clicked or triggered.

How to fix

Usually these are links that contain Webfonts or icon fonts, links containing SVG graphics or links accidentally created when editing content.

By running an accessibility checker, you can identify and fix empty links.

References

Missing form input labels

When a screen reader accesses a form area, it may ignore all elements within the form except for the form labels, fields and legends. It’s important to use labels to make input fields accessible to screen readers.

Based on their data:

  • 39% of the 4.4 million form inputs identified were not properly labelled (either via <label> tag, aria-label, aria-labelledby, or title).

How to fix

Best practice recommends to use HTML native form fields and labels when possible, i.e. <button>, <input>, and <label>. The label should provide a short and concise description of the data the field collects (or its purpose).

References

Empty buttons

Button elements (as defined as user interface components) should have a non-empty accessible name. Note: The rule considers an exception for “image buttons”  (i.e., input elements with a type attribute value of the image).

How to fix:

Below are examples of accessible button elements using:

  • Text content
    <button>Read more about …</button>

  • Aria-label attribute
    <button aria-label=”Read more about ..”></button>

  • Value attribute
    <input type=”submit” value=”submit” />

  • Button role
    <span role=”button” aria-label=”My button”>

References

Missing document language

When the language of a web page is missing, screen readers can’t read it with the proper pronunciation.

Based on their data:

  • 33% of pages did not specify a document language.

How to fix:

The solution to this easy-to-fix failure is to simply add the lang attribute to the <html> tag.

<html lang="en">

Reference

Related links (for designers and developers)

Abstract art
Abstract art