3 Tools to Help Fix the Web’s Most Common WCAG 2.2 Failures

Using software can be a lot like this picture of a traffic jam: you are trying to go somewhere, only to be stuck in one spot, with no way to go forward, feeling trapped and, at some point, deciding to just give up. Inaccessible sites only have “one route” that is frequently blocking access for different situations, with no alternate way to move ahead.

Picture of severe traffic jam with all traffic stopped going in one direction as a representation of an inaccessible website having only one route so that blocked users cannot proceed.
How some users may experience your inaccessible website.

This “route” may require good vision, the ability to use a keyboard and mouse, good hearing, being able to see text in images on the screen, discerning text with a small font or that doesn’t contrast well with the background, hearing audio instructions and cues, or using a mouse to click elements. An accessibility bug means you can’t use an alternate method to accomplish a task. What it means for your business is that users may be blocked from using your site or buying your goods and services.

Accessible code is code that addresses the nuances that make a site easy to use no matter which way you want to use it, such as keyboard navigation to quickly move around the page, to video controls for slowing down or speeding up playback, or reading the transcript instead of watching the video because it’s too distracting. Think of Google Maps, where you switch from the default of traveling by car to walking, biking, flying or taking public transit. While the end destination for site visitors is the same, the experience can be very different or even impossible depending on the method.

Google Maps shows multiple transportation methods to get from Point A to Point B, showing car, train, walking, biking, and that flying is not a valid option.
Multiple Transportation Options in Google Maps

WebAIM recently released The WebAIM Million, the 2025 report on the accessibility of the top 1,000,000 home pages. While some web pages are becoming more accessible, others with many issues are falling further behind.

The assessment found that 96% of all errors detected fall into six categories; the most common Web Content Accessibility Guide (WCAG) 2 failures have been the same for the last five years. Addressing just these few types of issues would significantly improve accessibility across the web.

List of 6 most common WCAG 2 failures from The WebAIM Million 2025 report, from highest to lowest: Low contrast textMissing alternative text for images Missing form input labels Empty links Empty buttons Missing document language
Six Most Common WCAG 2 Failures Identified by The WebAIM Million 2025

You can use tools like Lighthouse in Chrome DevTools, or add Chrome Extensions like WAVE Evaluation Tool and axe DevTools, to evaluate your website.

Let’s take a look at Dream Destination Demo Page (with intentional accessibility errors), one of Deque’s demo sites with accessibility errors, using each of these tools to find the common errors in The WebAIM Million report results. Each tool identifies errors, provides reference to the guideline that is not being met, and can include helpful code examples and links for more information.

Each tool scans the DOM and evaluates the results. The results provide context on what has been flagged and either provides information or a link to additional information on how to resolve the problem.

Example scan results for "Missing Form Input Labels" and "Missing Document Language" from Lighthouse.
Sample Scan Results from Lighthouse

Example scan results for "Low Contrast Text" and "Empty Buttons" from axe DevTools.
Sample Scan Results from axe DevTools

Example results for "Empty Button" and "Alternate Text" from Wave Evaluation Tool
Sample Scan Results from Wave Evaluation Tool

 

Here’s a summary of the six most common WCAG 2.0 issues, with the explanation, context, and a solution from the scan results.

Low Contrast Text

Elements must meet minimum color contrast ratio thresholds.

What It Means

The contrast between foreground and background colors do not meet the WCAG 2 Level AA minimum contrast ratio thresholds.

Why It Matters

Poor color contrast can make text difficult to discern. (Think of hidden object games where where poor color contrast is used intentionally!)

How to Fix

Fixing the issue may require one or more of the following:

  • Change the foreground color to have more contrast. Usually using the inverted color will increase the contrast, but this may not work well for for different colorblind conditions.
  • Increase the opacity of the foreground color.
  • Enhance font with bold, shadow or highlight.
  • Modify or remove any background images.

Missing Alternative Text for Images

[Missing] Alternative text: A non-empty alt attribute is present on an image

What It Means

Image alternative text is present.

Why It Matters

Alternative text presents the content or function of an image to screen reader users or in other situations where images cannot be seen or are unavailable.

How to Fix It

Ensure that the alternative text conveys the content and function of the image accurately and succinctly. The alt attribute should be equivalent, accurate, and succinct.

<img alt="Dream Destination logo" src="/assets/demo-sites/dreamdestination/images/dream-destination.png">

Standards and Guidelines: 1.1.1 Non-text Content (Level A)

Missing form input labels

What It Means

Input fields do not have accessible names

Why It Matters

When an input field doesn’t have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers.

How to Fix It

Add labels. Learn more about input field labels.

<input data-testid="start-station" placeholder="From" class="station ac_input" required="required" aria-label="From station" autocorrect="off" type="text" name="search[start_station]" id="search_start_station" spellcheck="false">

Empty links

Ensure links have discernible text

What it Means

An “empty link” in web development refers to a hyperlink (usually represented by the HTML tag) that doesn’t contain any text or an image with alternative text to describe its purpose. Essentially, it’s a link that has a destination (the href attribute) but no visible content to indicate what clicking it will do.

Why It Matters

Clearly defining the link helps all users, especially those with cognitive disabilities, understand the link’s purpose.

How to Fix It

To solve this problem, you need to fix at least (1) of the following:
1. Add text that is visible to screen readers.
2. Add an aria-label attribute with unique descriptive text.
3. Add an aria-labelledby attribute with unique descriptive text.
4. Add a title attribute.

In this example, text “Help” indicates the purpose of the link.

<a class="tracked dropdown-toggle menu-item" href="&quot;https://dequeuniversity.com/demo/dream#">Help</a>

Empty Buttons

What it Means

Am empty button is a button without inner text or a value attribute can’t communicate its purpose to screen readers.

Why It Matters

When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

How to Fix It

Place text content within the <button> element or give the <input type="text" /> element a value attribute.
<button>Save</button>
OR
<input type="submit" value="Save" />

Missing Document Language

[lang] attributes have a valid value

What It Means

A webpage or document is missing the language attribute in its HTML code, or the language metadata in the document properties.

Why It Matters

Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities will be better able to understand the content.

How to Fix It

Specify a valid BCP 47 language on the site or on elements.

<!doctype html>
<html lang="fr">
<head>

In Closing

I’ve shared the 6 most common WCAG 2 accessibility errors, and have shown several tools to help you identify the 6 most common accessibility issues. Using these tools can help you identify issues with your website, as well as providing useful information on easy fixes that can prevent major usability barriers, allowing everyone to use your site.

How to Run as Accessibility Scan

Below, I’ve shown how to access each with Chrome in a short gif. WARNINGThis content contains flashing lights or images that may trigger seizures in individuals with photosensitive epilepsy. Viewer discretion is advised.

GIF showing how to scan Dream Destination sample site using Lighthouse DevTools extension in Chrome.
Using Lighthouse in Chrome

GIF showing how to scan Dream Destination sample site using axe DevTools extension in Chrome.
Using axe DevTools extension in Chrome

GIF showing how to scan Dream Destination sample site using Wave Evaluation Tool extension with Chrome.
Using Wave Evaluation Tool extension in Chrome

Related Posts

Conversation

Join the conversation

Your email address will not be published. Required fields are marked *