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

After auditing hundreds of websites, the same issues appear over and over. These 10 failures account for the majority of accessibility barriers we find — and most of them can be fixed in a matter of hours once you know what to look for.

1. Missing or meaningless image alt text

Images without alt text are invisible to screen reader users. But generic alt text like 'image' or 'photo' is almost as bad. The fix: describe what the image communicates, not what it looks like. For a graph: describe the trend, not the colors. For a team photo: name the people. For decorative images: use alt="" (empty string, not omitted).

2. Insufficient color contrast

WCAG 2.1 AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt bold). Gray text on white, light blue links on white, and white text on medium-green buttons are the most common failures. Test every text element with a contrast checker. This is the most frequently cited issue in ADA lawsuits.

3. No keyboard access to interactive components

Any custom dropdown, modal dialog, date picker, or tab panel built without ARIA keyboard patterns will be inaccessible to keyboard-only users. Fix: implement the WAI-ARIA Authoring Practices patterns for each component type. For modals: focus must move into the modal on open, be trapped inside while open, and return to the trigger on close.

4. Missing form labels

Form inputs without associated labels are unidentifiable by screen readers. Placeholder text is not a label substitute — it disappears on input and is not announced by all screen readers. Fix: every input needs a <label> element with a matching for/id pair, or aria-label, or aria-labelledby.

5. Inaccessible error messages

Forms that show errors only with color (red border) or only near the input (which may not be announced) fail WCAG 3.3.1 and 3.3.3. Fix: use role="alert" or aria-live="polite" on error containers. Move focus to the error summary or first failing field. Describe both what went wrong and how to fix it.

6. Missing skip navigation link

Without a skip link, keyboard users must tab through every navigation item on every page load to reach main content. Fix: add a visually-hidden anchor at the top of the page that becomes visible on focus, linking to #main-content. This is a one-line fix with significant impact.

7. Videos without captions

Auto-generated captions (YouTube, Teams) do not satisfy WCAG 1.2.2 — they must be accurate. Auto-captions for specialized terminology (medical, legal, technical) are particularly unreliable. Fix: use a professional captioning service or review and correct auto-captions before publishing.

8. Improper heading structure

Pages that use headings for visual sizing rather than document structure (skipping from h1 to h4, using bold text instead of headings) break navigation for screen reader users who rely on headings to scan pages. Fix: ensure one h1 per page, don't skip levels, use headings to describe sections not to style text.

9. Focus not visible

CSS that removes the browser's default focus outline (outline: none or outline: 0) without replacing it with a custom indicator causes critical keyboard accessibility failures. Every interactive element must show a visible focus state. Fix: never use outline: none without implementing a custom focus indicator of equivalent or better visibility.

10. Inaccessible PDFs

PDFs created from untagged Word documents, scanned documents, or design tools like InDesign without accessibility export settings are completely inaccessible to screen readers. Fix: use Adobe Acrobat Pro to add tags, set reading order, add alt text to images, and define the document language. For forms: use Acrobat's form field tools to add interactive, labeled fields.