5 Most Common WCAG Violations and How to Fix Them
Every year, WebAIM analyzes the top one million websites for accessibility. The results are consistent and sobering: 94.8% of homepages have detectable WCAG failures. But the same five issues appear on the vast majority of failing sites. Fix these five and you eliminate most of your automated violations.
1. Low contrast text
Found on 81% of homepages. This is the most common WCAG violation by a wide margin.
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Light grey text on white backgrounds, placeholder text in forms, and footer links are the most frequent offenders.
How to fix it
/* Before — fails contrast (ratio 2.5:1) */
.subtitle {
color: #999999;
background: #ffffff;
}
/* After — passes contrast (ratio 7:1) */
.subtitle {
color: #595959;
background: #ffffff;
}Use a contrast checker tool during design. The browser DevTools in Chrome and Firefox have built-in contrast ratio inspectors — right-click an element, inspect, and look at the colour contrast information in the Styles panel.
2. Missing alt text on images
Found on 54.5% of homepages. Images without alt attributes are invisible to screen reader users and fail WCAG 1.1.1 (Non-text Content).
How to fix it
<!-- Before — missing alt -->
<img src="team-photo.jpg">
<!-- After — descriptive alt text -->
<img src="team-photo.jpg" alt="The WCAGAlert team at their Stockholm office">
<!-- Decorative image — use empty alt -->
<img src="decorative-line.svg" alt="">The key rules: informative images need descriptive alt text that conveys the same information as the image. Decorative images should have an empty alt="" attribute (not missing — present but empty). Never use alt text like "image" or "photo" — describe what the image shows.
3. Missing form input labels
Found on 45.9% of homepages. Form fields without associated labels leave screen reader users guessing what information to enter.
How to fix it
<!-- Before — no label -->
<input type="email" placeholder="Enter your email">
<!-- After — properly associated label -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="Enter your email">
<!-- Alternative — wrapping label -->
<label>
Email address
<input type="email" placeholder="Enter your email">
</label>Note that placeholder is not a substitute for a label. Placeholders disappear when users start typing, and many assistive technologies do not reliably announce placeholder text.
4. Empty links
Found on 48.6% of homepages. Links that contain no text — often icon-only links or image links without alt text — are announced by screen readers as "link" with no context about where they go.
How to fix it
<!-- Before — empty link -->
<a href="/twitter">
<svg>...</svg>
</a>
<!-- After — accessible icon link -->
<a href="/twitter" aria-label="Follow us on Twitter">
<svg aria-hidden="true">...</svg>
</a>
<!-- Alternative — visually hidden text -->
<a href="/twitter">
<svg aria-hidden="true">...</svg>
<span class="sr-only">Follow us on Twitter</span>
</a>Every link must have an accessible name. For icon-only links, use aria-label or visually hidden text. Mark decorative SVGs with aria-hidden="true" so screen readers skip the SVG markup.
5. Missing document language
Found on 17.1% of homepages. Without a lang attribute on the <html> element, screen readers cannot determine the correct pronunciation rules to use.
How to fix it
<!-- Before -->
<html>
<!-- After -->
<html lang="en">
<!-- For multilingual content, mark sections -->
<html lang="en">
<body>
<p>Welcome to our website.</p>
<p lang="de">Willkommen auf unserer Website.</p>
</body>
</html>This is arguably the easiest fix on the list — a single attribute on your HTML element. Use the correct BCP 47 language tag (e.g., en, de, fr, sv).
The bigger picture
These five issues account for the majority of automated WCAG violations across the web. They are well-understood, have clear fixes, and can be detected reliably by automated tools. Fixing them will not make your website fully accessible — automated scanning catches roughly 57% of WCAG issues — but it will eliminate the most common barriers and dramatically improve your compliance posture.
Set up automated monitoring to catch these issues as they appear, fix them in your codebase, and build accessibility checks into your development workflow. Prevention is always cheaper than remediation.
Monitor your sites for free
Scan your website for WCAG violations in under 60 seconds. No credit card required.