What Is Web Accessibility and Why Is It so Important?

Victoria Bobey
Dotdash Meredith Tech Blog
4 min readMar 30, 2022

--

An audit of the top million home pages on the web performed by WebAIM detected over 51 million distinct accessibility issues, with 97.4% of home pages having some type of problem. When nearly every landing page has issues, that’s proof that accessibility isn’t prioritized like it should be.

But what exactly does accessibility mean? Which users are running into accessibility problems?

When it comes to the web, accessibility is the practice of designing and developing websites so everyone can use them. The CDC estimates 1 in 4 adults in the United States have some type of disability. This translates to approximately 61 million people, meaning there is a lot of variation in how we perceive and navigate content.

But accessibility doesn’t only include people with disabilities. It also considers people using mobile devices, people with limited bandwidth, and even those with temporary limitations, such as someone in a waiting room who cannot play audio aloud.

Additionally, people may use assistive technology, which is software or equipment that improves their interaction with the web. For example, screen readers provide spoken or braille descriptions of items and can be used to navigate through a page. Most modern devices come with built-in screen readers, such as VoiceOver on macOS and Narrator on Windows.

An example of a description provided by VoiceOver for a focused link. The description reads “visited, link, Jane Smith, Senior Editor”.
An example description provided by the VoiceOver screenreader

But what kind of barriers are problematic for users? How do designers, developers, and quality assurance analysts know what to watch for?

To answer these questions, the WC3 developed the Web Content Accessibility Guidelines (WCAG 2), which provide a shared accessibility standard at an international level. These guidelines help us become aware of the types of issues that frustrate people so we can build user experiences that are enjoyable for everyone.

Let’s take a look at some of the top web accessibility concerns.

Low contrast text is one of the most common accessibility issues, detected on 86.4% of home pages analyzed by the aforementioned WebAIM audit.

WCAG 2 (criterion 1.4.3) defines contrast as the difference in the relative luminance (brightness) between two colors. Contrast ratios range from 1:1 (white on white) to 21:1 (black on white). In order for text to be readable for everyone, WCAG 2 sets the minimum acceptable contrast ratio for text at 4.5:1, with an exception of 3:1 for large text. Large text is defined as 18 point (24px) or 14 point bold (18.5px).

Examples of different shades of grey text on a white background and the corresponding contrast ratios. #212121 text has a contrast ratio of 16.1:1. #666666 text has a contrast ratio of 5.74:1. #808080 text has a contrast ratio of 3.94:1. #D3D3D3 text has a contrast ratio of 1.49:1.
Examples of different contrast ratios

Low contrast text negatively impacts people with low vision or other visual disabilities, because text may be illegible.

The same grey text on white background contrast ratio examples as above with the FireFox Developer Tools contrast loss simulation applied. The contrast loss simulation adds a grey overlay on-top of the image, making it much harder to read the text.
The same text examples as above with FireFox Developer Tools contrast loss simulation applied

Another common issue is missing or improper use of alternative text. Alternative text functions as a substitute for non-text content, such as images, audio recordings, and videos. It benefits people who use screen readers, allowing them to perceive information provided by non-text content. This is especially important for functional images, because assistive technologies cannot convey the meaning of an unlabeled image to the user.

An example of a card button to open more information that is a plus icon. When focused, the alternative text provides extra information describing the purpose of the button. The text reads “Learn More: Find Your Perfect Bouquet, button”.
A functional image and the corresponding description VoiceOver provides

If no alternative text is provided, the user may only be told there is an unlabelled image and may not be able to determine the purpose of the button. Even worse, some screen readers may read out the file name of the image, creating a poor user experience.

Example of an unlabeled image and the description provided by VoiceOver. The description contains the image source file name, which is a random non-readable sequence of characters.
An unlabeled image and the confusing screenreader output provided

Keyboard access is another major accessibility concern. People may be unable to use a mouse due to motor or visual disabilities and rely on keyboard buttons or other assistive technology to interact with the page. If keyboard navigation isn’t taken into consideration, users may end up completely blocked from accessing content. It is important to verify all functionality on a website is keyboard accessible, including menus, buttons, filters, form fields, and user interface controls. On top of that, focus should move between elements in a logical order and always be visible so people can keep track of where they are on the page.

When accessibility is an afterthought, it’s easy to accidentally introduce barriers that frustrate and hinder our users. As technology becomes further integrated into our lives, we must make accessibility a core part of our design and development workflow so as many people as possible can enjoy the web.

--

--