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.
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.
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.
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.
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=""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. WARNING: This content contains flashing lights or images that may trigger seizures in individuals with photosensitive epilepsy. Viewer discretion is advised.
