Accessibility Watch › How to Fix It

The 5 Most Common WCAG Failures (and How to Fix Each)

By Accessibility Watch · June 6, 2026

Here’s the encouraging part of web accessibility: the failures aren’t exotic. WebAIM scans the top 1,000,000 home pages every year, and roughly 95% of them have detectable WCAG failures — but the same five issues account for the overwhelming majority. They’re also exactly what automated lawsuit scanners detect. Fix these and you’ve handled most of your exposure.

1. Low-contrast text

The single most common failure. Light-gray text on white, pale text on a colored button — if the contrast between text and its background is too low, people with low vision can’t read it.

Fix it: Ensure a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥19px bold). Darken text or lighten backgrounds until you clear the ratio. Don’t rely on color alone to convey meaning. Most design tools and browser dev tools now show contrast ratios directly.

2. Missing image alt text

Images without a text alternative are invisible to screen-reader users — and “invisible” can mean an unusable product page or an unlabeled “Add to cart” icon.

Fix it: Give every meaningful image an alt attribute that describes its purpose: <img src="boot.jpg" alt="Brown leather ankle boot, side view">. For decorative images that add nothing, use an empty alt="" so assistive tech skips them. The rule: describe the function, not the file.

3. Empty links

A link with no readable text — often an icon-only link, or one wrapping an untagged image — is announced to a screen reader as just “link,” with no destination.

Fix it: Make sure every link has discernible text. For icon links, add a visually-hidden label or an aria-label: <a href="/cart" aria-label="View cart">. If a link wraps an image, give the image alt text.

4. Missing form input labels

An input with no associated label leaves screen-reader users guessing what to type. Placeholder text is not a substitute — it disappears on focus and often fails contrast.

Fix it: Pair every field with a real <label>: <label for="email">Email</label><input id="email" type="email">. Where a visible label isn’t wanted, use aria-label — but a visible label is almost always better.

5. Empty buttons

Like empty links: a button with no text (commonly an icon-only button — a hamburger menu, a close ”×”) gives assistive tech nothing to announce.

Fix it: Add text or an accessible name: <button aria-label="Close dialog">×</button>. Verify the name describes the action.

The payoff

None of these require a redesign — they’re attribute-level and CSS-level fixes. Clearing these five is what moves a site off the automated-scanner radar that drives most accessibility claims, and it’s the bulk of conforming to WCAG 2.1 Level AA. (Automated checks catch a large share of barriers but not all; full conformance also needs keyboard and screen-reader testing.)

The free wcagcheckr extension finds each of these on your own pages and walks you through the fix.