You ran an accessibility scan and got a list of WCAG violations. Now what? This guide walks you through fixing the most common issues — with real code examples for each one.
We analyzed 175+ real websites with Accessalyze and found the same 8 violations appearing over and over. Fix these and you'll resolve 80%+ of the accessibility problems on most sites.
See how 321 websites scored →
View the 2026 Reportimage-alt)What it is: Images without descriptive alt attributes. Screen readers can't describe the image to blind users.
WCAG criterion: 1.1.1 Non-text Content (Level A)
How to fix it:
<!-- Bad --> <img src="product.jpg"> <img src="hero.jpg" alt=""> <!-- Good --> <img src="product.jpg" alt="Red leather office chair with armrests"> <!-- Decorative images: use empty alt so screen readers skip them --> <img src="divider.png" alt="" role="presentation">
Rule of thumb: If the image conveys information, describe it. If it's purely decorative, use alt="".
color-contrast)What it is: Text that doesn't have enough contrast against its background. Affects low-vision users and anyone reading in bright sunlight.
WCAG criterion: 1.4.3 Contrast (Minimum) — requires 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold+)
How to fix it:
<!-- Bad: gray text on white background, ~2.4:1 ratio --> <p style="color: #999999;">This fails WCAG AA</p> <!-- Good: darker gray, ~7:1 ratio --> <p style="color: #595959;">This passes WCAG AA</p>
Use a contrast checker tool — WebAIM's Contrast Checker is free. Your brand colors may need darkening.
label)What it is: Form inputs without associated <label> elements. Screen reader users can't tell what a field is for.
WCAG criterion: 1.3.1 Info and Relationships, 4.1.2 Name, Role, Value
How to fix it:
<!-- Bad --> <input type="email" placeholder="Enter your email"> <!-- Good: visible label --> <label for="email">Email address</label> <input id="email" type="email" autocomplete="email"> <!-- Good: aria-label when visual label not possible --> <input type="search" aria-label="Search products">
scrollable-region-focusable, tabindex)What it is: Interactive elements that can't be reached or operated with a keyboard alone. Affects users with motor disabilities who don't use a mouse.
WCAG criterion: 2.1.1 Keyboard
How to fix it:
<!-- Bad: click handler on non-focusable element -->
<div onclick="doSomething()">Click me</div>
<!-- Good: use semantic button or add keyboard support -->
<button onclick="doSomething()">Click me</button>
<!-- Or: add tabindex and keydown handler -->
<div onclick="doSomething()"
onkeydown="if(event.key==='Enter') doSomething()"
tabindex="0" role="button">Click me</div>
landmark-one-main, region)What it is: Pages without proper HTML landmark structure. Screen reader users navigate by landmarks (main, nav, header, footer) to skip around the page.
WCAG criterion: 1.3.6 Identify Purpose
How to fix it:
<!-- Add semantic HTML5 landmarks --> <header>...logo and nav...</header> <nav aria-label="Main navigation">...</nav> <main>...page content...</main> <aside aria-label="Related content">...</aside> <footer>...footer links...</footer>
html-has-lang)What it is: The <html> tag lacks a lang attribute. Screen readers need this to use the correct voice/pronunciation.
WCAG criterion: 3.1.1 Language of Page
How to fix it:
<!-- Bad --> <html> <!-- Good --> <html lang="en"> <!-- For multilingual pages, set per-section --> <p lang="es">Hola mundo</p>
duplicate-id)What it is: Multiple elements sharing the same id attribute. Breaks ARIA relationships and can confuse assistive technology.
How to fix it: Audit your HTML for repeated IDs — use unique identifiers, or switch repeated elements to use class instead. Common in templates where the same component is rendered multiple times.
focus-visible)What it is: Removing the default keyboard focus ring (outline: none) without providing an alternative. Keyboard users can't see where they are on the page.
WCAG criterion: 2.4.7 Focus Visible
How to fix it:
<!-- Bad: removing focus entirely -->
* { outline: none; }
<!-- Good: custom focus styles that are clearly visible -->
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
border-radius: 3px;
}
Not all violations are equal. Fix in this order:
| Impact | Examples | Fix By |
|---|---|---|
| Critical | Keyboard traps, missing ARIA roles on interactive elements | Immediately |
| Serious | Missing form labels, no alt text on informational images | This sprint |
| Moderate | Color contrast, missing landmarks | Next sprint |
| Minor | Missing lang attribute, cosmetic issues | Backlog |
For a typical marketing site (10-20 pages), expect:
Custom web apps and e-commerce sites take longer, especially if they have complex interactive components like date pickers, modals, and carousels.
Most WCAG violations are fixable by any developer who knows what to look for. The challenge is finding them all. Automated tools catch roughly 30-40% of violations — the rest require manual review.
A practical approach:
Free WCAG 2.1 AA scan — instant results, no signup required. See your exact violations with AI-generated fix code.
Scan My Website Free →Accessalyze goes beyond just flagging violations — it generates specific fix code for each issue. Instead of "you have a color contrast problem," you get the exact CSS with corrected hex values. Instead of "your image is missing alt text," you get a suggested description.
The $19 full report includes AI fix code for every violation found, plus a WCAG 2.1 AA compliance checklist. Most teams recover the cost in the first hour of developer time saved.
The most common WCAG violations — missing alt text, poor color contrast, unlabeled form fields, keyboard issues — are all fixable with straightforward HTML and CSS changes. Start by scanning your site to get the full picture, then work through fixes by severity.
The April 2027 ADA Title II deadline for government and educational websites is approaching, but private businesses face litigation risk now. The sooner you fix violations, the lower your exposure.
Related reading: How to Prevent an ADA Website Accessibility Lawsuit in 2026 · WCAG 2.1 AA Compliance Checklist
Try it yourself
Enter your website URL to get a free accessibility score.