Quick wins for web accessibility

Summary

The WebAIM project publishes an accessibility evaluation of the home pages of the top 1,000,000 websites, updated annually. The most recent report found detectable WCAG 2 failures on 95.9% of tested home pages.1

Automated testing can only reliably detect a small portion of all possible WCAG conformance failures. This means that the actual conformance level is extraordinarily likely to be even lower.

The topic and practice of web accessibility is wide-ranging and nuanced, which can make it feel hard to get started. A good place to start is to correct the most common errors identified in the study. This page will overview those most common errors.

Table of contents

Most common web accessibility errors

#1: Low contrast

The most recent WebAIM Million report found low contrast text on 83.9% of tested home pages.1

Users must be able to perceive content on the page. A sufficient contrast ratio supports that perception. Ensure that you’re using sufficient color contrast.

In WCAG, contrast is measured using “relative luminance”. Relative luminance is the brightness between two colors.2 Relative luminance is expressed as a ratio ranging from 1:1 (white text on a white background) to 21:1 (black text on a white background).

The first of the following two examples shows black text on a white background. The second example shows white text on a white background, illustrating a contrast ratio of 1:1, which is completely imperceptible to anyone.

Text
21:1
Text
1:1

WCAG defines two levels of compliance for color contrast.

Text

Regular text and images of text must satisfy a minimum contrast ratio of 4.5:1. The enhanced minimum requirement is 7:1.

The first of the following two examples shows medium gray text on a light gray background, with a contrast ratio of 4.6:1. The second example shows a darker gray for the text, with the same light gray background, with a contrast ratio of 7.19:1.

Text
4.6:1
Text
7.19:1

Large text

Large-scale text – text of a size that’s at least 18 point or 14 point bold – and images of large-scale text must meet a contrast ratio of at least 3:1. The enhanced minimum requirement is 4.5:1.

Both of the following examples use a 24px font size. The first example shows medium gray text on a light gray background, with a contrast ratio of 3.08:1. The second example shows a darker gray for the text, with the same light gray background, with a contrast ratio of 4.6:1.

Text
3.08:1
Text
4.6:1

Solution: Ensure text elements have sufficient color contrast against the background.

#2: Missing alt text for images

The most recent WebAIM Million report found missing alt text on 53.1% of tested home pages.1

Missing alt text for images is one of the most common culprits. Ensure that you provide the alt attribute and a descriptive text value for each web image.

<img src="./feature-image" />

This example image element above is missing an alt attribute. If you can’t see the image and there’s no alternative text, there’s no means for a user to understand the intent of the image.

<img
  src="./feature-image"
  alt="Short-coated brown puppy, background blurred."
/>

With the alt attribute providing sufficient descriptive text, users can discern the content of the photo without having seen the image.

Solution: Ensure images have alternative text.

The most recent WebAIM Million report found empty links on 46.3% of tested home pages.1

If a link contains no text, the function or purpose of the link will be imperceptible to some users. This happens when an anchor element has an href attribute but contains no text, or a linked image has no alternative text.

This example shows a common pattern:

<a href="http://www.twitter.com/washingtonpost">
    <span class="fa fa-twitter"></span>
</a>

That markup displays a social icon that links out to Twitter. However, it lacks link text to communicate the purpose of the link non-visually.

Solution: Ensure links have discernible text.

#4: Missing form input labels

The most recent WebAIM Million report found that a third of form inputs were missing labels.1

Missing form input labels can make it difficult or impossible for users to submit forms.

Example with form input labels missing

In this example, the text “Name” is near the intended input area. That relationship will be clear to most sighted users, but not so for others. If the proper markup is not present, screen readers must guess what text, if any, describes what field.

<div>
    Name:
    <input type="text" name="name"/>
</div>

Fixed example with form input labels

To explicitly associate labels with form fields, labels must be marked up with the HTML <label> element. The <label> element takes a for attribute, whose value should match the id attribute of the associated form element.

<div>
    <label for="name">Name:</label>
    <input
      id="name"
      type="text"
      name="name"
    />
</div>

Solution: Ensure form <input> elements have labels.

#5: Empty buttons

The most recent WebAIM Million report found empty buttons on 30.6% of tested home pages.1

Users of assistive technology can have trouble discerning the purpose of a button that has no accessible name. Buttons must have discernible text that clearly describes the button’s purpose, function, or action. There are many ways to accomplish this. Check out the Deque button-name rule page.

Solution: Ensure <button> elements have discernible text.

#6: Missing document language

The most recent WebAIM Million report found the document language was missing on 13.5% of tested home pages.1

Screen reader users select a default language. If the language of a page is not specified, the screen reader will default to the user’s selected default language. For multi-lingual users, this can result in strange behavior.

For example, suppose a user navigates the web in both Spanish and English, and their default language is set to Spanish. If a website doesn’t define the language of the content, and the content is in English, the screen reader will read aloud English content with a default voice designed for Spanish content.

Ensure that you identify a language in the opening <html> element, using the lang attribute:

<html lang="es">
  <!--document head and body-->
</html>

Solution: Ensure the <html> element has a lang attribute.

Read on

Pour another cup and start testing for web accessibility.

Footnotes

  1. The WebAIM Million, WebAIM’s annual accessibility evaluation of the top 1,000,000 home pages. ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7

  2. WebAIM: Article on contrast ↩