The Most Common Accessibility Errors
Every year, the WebAIM Million study scans 1 million websites for accessibility. And every year, the same story: 96.3% of homepages have detectable WCAG errors. Nearly all of them. The good news? These errors are often surprisingly easy to fix. Here are the top 10 I see everywhere.
Top 10 Errors and Fixes
- Low contrast text (86%): That elegant light gray on white? It excludes millions. Ensure 4.5:1 ratio for normal text, 3:1 for large text. Use Colour Contrast Analyser to check
- Missing alt (58%): No alt attribute, absurd alts like "image.jpg", unlabeled SVG icons. Add descriptive alt for informative images, empty alt="" for decorative ones
- Empty/non-explicit links (50%): "Click here" tells nobody anything. Imagine a screen reader announcing "link: click here" twenty times. Use descriptive text
- Missing form labels (46%): Fields without labels, placeholder as only indicator. Add label for/id on every field
- Empty buttons (28%): Icon-only buttons with no text. A screen reader announces "button" and... that's it. Add text or aria-label
- Missing page language (18%): Without html lang, screen readers guess the language. One line of code fixes this -- literally the quickest fix on this list
- Incorrect heading structure: Skipping from h1 to h3, using headings for styling. Single h1, logical hierarchy, use CSS for visual sizing
- Invisible focus: The infamous outline: none with no replacement. Use :focus-visible with contrasted outline (3:1 minimum)
- Tables without headers: Data tables without th, layout tables without role="presentation". Add th scope="col/row" and descriptive caption
- Keyboard-inaccessible content: Clickable divs with no role or keyboard handling. Use native button and a elements, add onKeyDown alongside onClick
Fixing these 10 errors resolves the majority of accessibility problems. Start with the low-effort, high-impact fixes -- page language, alt text, form labels. In one day of work, you can already transform the situation.