R

RatedWithAI

Blog

Scan your site

Practical Fixes

Top 10 Most Common WCAG Failures (And How to Fix Them)

These 10 accessibility issues appear on the majority of websites we scan. Here's exactly what they are and how to fix each one with real code examples.

·10 min read

The Numbers Don't Lie

After analyzing thousands of websites, we found that just 10 issues account for over 80% of all accessibility violations. Fix these, and you've solved the majority of your accessibility problems.

96%

of homepages have WCAG failures

50+

average errors per homepage

10

issue types cover 80%+ of problems

1

Missing Alt Text on Images

Found on 58% of websites. Images without alt text are invisible to screen readers, hiding potentially critical information from blind users.

WCAG Criterion: 1.1.1 Non-text Content (Level A)

❌ Bad

<img src="product.jpg">

✅ Good

<img src="product.jpg" alt="Red leather handbag with gold clasp">

Quick fix:

  • • Add descriptive alt text that conveys the image's purpose
  • • For decorative images, use alt=""
  • • Don't start with "Image of..." or "Picture of..." — screen readers already announce it's an image
2

Low Color Contrast

Found on 83% of websites. Light gray text on white backgrounds is everywhere—and it's unreadable for users with low vision.

WCAG Criterion: 1.4.3 Contrast (Minimum) (Level AA)

❌ Bad (2.5:1 contrast)

This light gray text is hard to read

✅ Good (7:1 contrast)

This darker text is much easier to read

Requirements:

  • • Normal text: minimum 4.5:1 contrast ratio
  • • Large text (18pt+ or 14pt+ bold): minimum 3:1 ratio
  • • Use a contrast checker tool to verify your color pairs
3

Empty Links (No Text)

Found on 51% of websites. Links with only icons or images but no accessible text leave screen reader users wondering where they lead.

WCAG Criterion: 2.4.4 Link Purpose (Level A)

❌ Bad

<a href="/cart"><svg>...</svg></a>

✅ Good

<a href="/cart" aria-label="Shopping cart"><svg>...</svg></a>
4

Missing Form Labels

Found on 46% of websites. Form inputs without labels leave users guessing what information to enter.

WCAG Criterion: 1.3.1 Info and Relationships (Level A)

❌ Bad (placeholder only)

<input placeholder="Email">

✅ Good

<label for="email">Email</label> <input id="email">

Why placeholders aren't labels:

Placeholders disappear when you start typing, making it hard to verify you're filling the right field. They also often have poor contrast.

5

Empty Buttons (No Accessible Name)

Found on 27% of websites. Icon-only buttons without accessible names are announced as just "button" by screen readers.

WCAG Criterion: 4.1.2 Name, Role, Value (Level A)

❌ Bad

<button><svg>×</svg></button>

✅ Good

<button aria-label="Close dialog"><svg>×</svg></button>
6

Missing Document Language

Found on 18% of websites. Without a declared language, screen readers may pronounce text incorrectly.

WCAG Criterion: 3.1.1 Language of Page (Level A)

❌ Bad

<html>

✅ Good

<html lang="en">

This is a one-line fix that takes 5 seconds. There's no excuse for missing it.

7

Broken Heading Hierarchy

Found on 42% of websites. Skipping heading levels (H1 to H3) or using headings only for styling breaks navigation for screen reader users.

WCAG Criterion: 1.3.1 Info and Relationships (Level A)

Correct hierarchy:

  • H1: Page title (one per page)
  • └─ H2: Major section
  •    └─ H3: Subsection
  •       └─ H4: Sub-subsection
  • └─ H2: Another major section
8

Missing or Hidden Focus Indicators

Found on 78% of websites. Many sites use outline: none without providing an alternative, making keyboard navigation impossible to follow.

WCAG Criterion: 2.4.7 Focus Visible (Level AA)

❌ Bad

*:focus { outline: none; }

✅ Good

*:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
9

Inaccessible Dropdown Menus

Found on 34% of websites. Menus that only open on hover are unusable for keyboard and touch users.

WCAG Criterion: 2.1.1 Keyboard (Level A)

How to fix:

  • • Make menu toggle buttons keyboard focusable and operable
  • • Add aria-expanded to indicate open/closed state
  • • Allow arrow key navigation within the menu
  • • Close menu when pressing Escape
  • • Consider click-to-open instead of hover-only
10

Videos Without Captions

Found on 22% of websites with video. Videos without captions are inaccessible to deaf and hard-of-hearing users—and to anyone watching in a quiet environment.

WCAG Criterion: 1.2.2 Captions (Prerecorded) (Level A)

How to fix:

  • • Add accurate closed captions to all video content
  • • Auto-generated captions (YouTube, etc.) need manual review
  • • Provide a transcript as an alternative
  • • Include speaker identification and sound effects in captions

Fix Priority Matrix

Not sure where to start? Here's how to prioritize:

IssueImpactEffortPriority
Missing alt textHighLow🔥 Do now
Document languageMediumMinimal🔥 Do now
Form labelsHighLow🔥 Do now
Color contrastHighMedium📅 This week
Focus indicatorsHighLow🔥 Do now
Empty links/buttonsHighLow🔥 Do now
Heading hierarchyMediumMedium📅 This week
Dropdown menusHighHigh📋 Plan it
Video captionsHighHigh📋 Plan it

Find Your Issues

See Which of These 10 Issues Affect Your Site

Our scanner detects all 10 of these common failures instantly and shows you exactly how to fix each one.

Scan Your Site Free

Related Resources