# Why 96% of Websites Fail Basic Accessibility Checks (and How to Fix It)

The statistics are sobering: according to WebAIM's annual analysis, 96.3% of the top one million websites have detectable WCAG 2 failures. On average, these sites have 56 accessibility errors per homepage. Why is web accessibility so poor, and what can you do about it? This comprehensive guide explores the most common accessibility failures and provides practical solutions for each.

## Understanding the WebAIM Million Report

Each year, WebAIM (Web Accessibility In Mind) scans the homepages of the top one million websites to evaluate automated-detectable accessibility issues. The 2024 report reveals persistent accessibility problems across the web:

- **96.3% of homepages** had detectable WCAG 2 failures
- **56.8 errors** were detected per page on average
- **Six error types** account for the vast majority of all errors
- Accessibility is **slightly improving** year over year, but very slowly

It's important to note that automated testing catches only about 25-30% of accessibility issues. The true failure rate is likely even higher when considering issues that require manual testing to detect.

## The Six Most Common Accessibility Errors

According to WebAIM's research, just six types of errors account for approximately 96% of all detected accessibility issues. Addressing these would dramatically improve web accessibility.

### 1. Low Contrast Text (83.6% of pages)

The most common accessibility error is insufficient color contrast between text and its background. This affects users with low vision, color blindness, or who view websites in bright lighting conditions.

**The requirement:** WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

**Why it happens:**

- Designers prioritize aesthetics over readability
- Light gray text on white backgrounds is trendy but inaccessible
- Brand colors may not meet contrast requirements
- Contrast isn't checked during design review

**How to fix it:**

- Use contrast checker tools during design (WebAIM Contrast Checker, Colour Contrast Analyser)
- Test your color palette before finalizing designs
- Consider contrast when choosing brand colors
- Increase font weight or size if contrast is borderline
- Add automated contrast testing to your development pipeline

```css
/* Instead of this */
.muted-text {
  color: #999999; /* 2.85:1 contrast on white - FAILS */
}

/* Use this */
.muted-text {
  color: #767676; /* 4.54:1 contrast on white - PASSES */
}
```

### 2. Missing Alternative Text (58.2% of pages)

Over half of all websites have images without alternative text, making visual content invisible to screen reader users.

**The requirement:** All images must have alt attributes. Informative images need descriptive alt text; decorative images need empty alt (alt="").

**Why it happens:**

- Content creators don't know about alt text requirements
- CMS tools don't enforce or encourage alt text
- Alt text seems optional when uploading images
- Writing good alt text is seen as time-consuming

**How to fix it:**

- Make alt text a required field in your CMS
- Train content creators on writing effective alt text
- Use automated checks to flag images without alt attributes
- Include alt text requirements in content guidelines

```html
<!-- Informative image -->
<img src="team-meeting.jpg"
     alt="Five team members discussing project plans around a whiteboard">

<!-- Decorative image -->
<img src="decorative-divider.png" alt="">

<!-- Complex image with extended description -->
<figure>
  <img src="sales-chart.png" alt="Sales by region chart showing Q4 results">
  <figcaption>
    Northeast led with $2.3M, followed by Southwest at $1.8M...
  </figcaption>
</figure>
```

### 3. Empty Links (50.1% of pages)

Half of websites have links that contain no text, making them meaningless to screen reader users who hear only "link" with no indication of where it leads.

**The requirement:** Links must have discernible text that describes their destination or purpose.

**Why it happens:**

- Icon-only links without labels (social media icons, navigation arrows)
- Links wrapped around images that lack alt text
- CSS-based content (icons) without accessible text alternatives
- Empty anchor tags used for JavaScript functionality

**How to fix it:**

```html
<!-- Bad: No accessible text -->
<a href="https://twitter.com/company">
  <i class="icon-twitter"></i>
</a>

<!-- Good: Screen-reader-only text -->
<a href="https://twitter.com/company">
  <i class="icon-twitter" aria-hidden="true"></i>
  <span class="sr-only">Follow us on Twitter</span>
</a>

<!-- Good: aria-label -->
<a href="https://twitter.com/company" aria-label="Follow us on Twitter">
  <i class="icon-twitter" aria-hidden="true"></i>
</a>

<!-- Good: Image with alt text -->
<a href="/products">
  <img src="product-banner.jpg" alt="View our product catalog">
</a>
```

### 4. Missing Form Input Labels (45.9% of pages)

Nearly half of websites have form fields that aren't properly labeled, leaving users unable to know what information to enter.

**The requirement:** All form controls must have associated labels that describe what information is expected.

**Why it happens:**

- Placeholder text used instead of labels
- Visual labels exist but aren't programmatically associated
- Icon-only buttons without labels
- Search fields often lack visible labels

**How to fix it:**

```html
<!-- Bad: Placeholder as label -->
<input type="email" placeholder="Email Address">

<!-- Good: Proper label association -->
<label for="email">Email Address</label>
<input type="email" id="email">

<!-- Good: Visually hidden label for minimal UI -->
<label for="search" class="sr-only">Search products</label>
<input type="search" id="search" placeholder="Search">

<!-- Good: aria-label for simple fields -->
<input type="search" aria-label="Search products" placeholder="Search">
```

### 5. Empty Buttons (28.6% of pages)

More than a quarter of websites have buttons without accessible names, typically icon-only buttons used for actions like close, menu, or navigation.

**The requirement:** All buttons must have accessible names that describe their purpose.

**Why it happens:**

- Icon fonts or SVGs used without text alternatives
- Close buttons with just an "×" character
- Navigation buttons with arrows only
- Assumption that icons are universally understood

**How to fix it:**

```html
<!-- Bad: No accessible text -->
<button><i class="icon-menu"></i></button>

<!-- Good: aria-label -->
<button aria-label="Open navigation menu">
  <i class="icon-menu" aria-hidden="true"></i>
</button>

<!-- Good: Screen-reader-only text -->
<button>
  <i class="icon-close" aria-hidden="true"></i>
  <span class="sr-only">Close dialog</span>
</button>

<!-- Good: SVG with title -->
<button>
  <svg role="img" aria-labelledby="menu-title">
    <title id="menu-title">Open menu</title>
    <path d="..."></path>
  </svg>
</button>
```

### 6. Missing Document Language (18.6% of pages)

Nearly one in five websites doesn't specify the language of the document, which affects screen readers' pronunciation and translation tools.

**The requirement:** The HTML element must have a lang attribute specifying the page's primary language.

**Why it happens:**

- Default HTML templates omit the lang attribute
- Developers don't know it's required
- Automated testing isn't catching it

**How to fix it:**

```html
<!-- Add lang attribute to HTML element -->
<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

<!-- For pages with mixed languages -->
<html lang="en">
  <body>
    <p>Welcome to our site.</p>
    <p lang="es">Bienvenido a nuestro sitio.</p>
  </body>
</html>
```

## Why Does Web Accessibility Remain So Poor?

Understanding why these issues persist helps in addressing them:

### Lack of Awareness

Many developers, designers, and content creators simply don't know about accessibility requirements. Web development training often omits accessibility, and it's rarely prioritized in educational curricula.

### Perceived Complexity

Accessibility can seem overwhelming, especially when presented as a long list of WCAG success criteria. Many teams don't know where to start or believe it requires specialized expertise.

### Time and Budget Constraints

Accessibility is often deprioritized when deadlines loom. It's seen as extra work rather than a fundamental quality requirement.

### Lack of Enforcement

While accessibility lawsuits are increasing, most websites still face no consequences for inaccessibility. Without external pressure, many organizations don't prioritize it.

### Testing Gaps

Accessibility isn't included in standard QA processes. Automated testing only catches obvious issues, and manual testing with assistive technologies isn't common.

## Creating an Accessibility-First Culture

Fixing individual issues isn't enough—organizations need systemic change:

### Shift Left

Address accessibility from the start of projects:

- Include accessibility in design requirements
- Consider accessibility during wireframing and prototyping
- Build accessible components once and reuse them
- Include accessibility in code reviews

### Invest in Training

- Train designers on accessible design principles
- Train developers on semantic HTML and ARIA
- Train content creators on alt text and accessible writing
- Train QA teams on accessibility testing

### Automate What You Can

- Add automated accessibility testing to CI/CD pipelines
- Use linting tools that catch common issues
- Configure CMS to require alt text
- Set up monitoring for ongoing compliance

### Test with Real Users

- Include people with disabilities in user testing
- Engage with the disability community
- Consider hiring accessibility consultants
- Create feedback channels for accessibility issues

## Quick Wins: Start Here

If you're overwhelmed, focus on these high-impact improvements:

1. **Run an automated scan** to identify obvious issues
2. **Add the lang attribute** to your HTML element
3. **Fix color contrast** issues (highest frequency)
4. **Add alt text** to all images
5. **Label all form fields**
6. **Add labels to icon-only buttons and links**

These six fixes address the most common errors and can be implemented relatively quickly.

## Conclusion

The fact that 96% of websites fail basic accessibility checks is both discouraging and an opportunity. The most common issues are also some of the easiest to fix—low contrast, missing alt text, unlabeled form fields. By addressing these fundamental problems and building accessibility into your development process, you can dramatically improve access for users with disabilities.

Remember: accessibility benefits everyone. Text that's readable for users with low vision is readable for users on phones in bright sunlight. Labels that help screen reader users also help users with cognitive disabilities and those using voice control. Building accessible websites isn't just about compliance—it's about creating better experiences for all users.