How to Fix the Most Common Accessibility Violations
You ran an accessibility scan and found violations. Now what? This guide walks through the exact fixes for the issues that appear on 90% of non-compliant websites.
Good news: most fixes are simple
The accessibility issues that trigger lawsuits are usually easy to fix. They're just easy to miss. A few hours of work can take you from lawsuit target to reasonably compliant.
1. Missing Alt Text on Images
What it means: Screen readers can't describe images without alt text. Users hear nothing or a meaningless filename.
The Fix
Add an alt attribute to every <img> tag:
<!-- Product image: describe what's shown -->
<img src="shoe.jpg" alt="Red running shoe, side view">
<!-- Decorative image: use empty alt -->
<img src="divider.png" alt="">
<!-- Logo: include company name -->
<img src="logo.svg" alt="Acme Corp logo">
Tips for Good Alt Text
- Be specific: "Blue leather wallet, open view" not just "wallet"
- Skip "image of" or "picture of"—screen readers already announce it's an image
- For decorative images (backgrounds, dividers), use
alt=""so screen readers skip them - If the image contains text, include that text in the alt
2. Form Inputs Without Labels
What it means: Screen readers can't tell users what a form field is for. Placeholders don't count—they disappear when you type.
The Fix
Connect a <label> to each input using for and id:
<!-- Wrong: placeholder only -->
<input type="email" placeholder="Email">
<!-- Correct: label + input -->
<label for="email">Email address</label>
<input type="email" id="email">
For Hidden Labels (Visually)
If you want a minimal design without visible labels, hide them visually while keeping them accessible:
<!-- CSS class for visually hidden -->
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
<!-- Usage -->
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">
3. Low Color Contrast
What it means: Text is too similar in color to its background. Users with low vision can't read it.
WCAG requirement: 4.5:1 contrast ratio for normal text, 3:1 for large text (18pt+ or 14pt bold).
The Fix
Use a contrast checker tool, then adjust your colors. Usually this means making grays darker.
Common fixes:
Fails: #999999 on white (2.8:1)
Passes: #767676 on white (4.5:1)
Fails: #cccccc on white (1.6:1)
Passes: #757575 on white (4.6:1)
Common Culprits
- Placeholder text in form fields
- Footer links
- Disabled button text
- Image captions
- Timestamps and metadata
4. Buttons Without Accessible Names
What it means: Icon-only buttons (hamburger menus, social icons, close buttons) have no text for screen readers to announce.
The Fix
Add text content or an aria-label:
<!-- Option 1: Visually hidden text -->
<button>
<svg>...menu icon...</svg>
<span class="sr-only">Open menu</span>
</button>
<!-- Option 2: aria-label -->
<button aria-label="Open menu">
<svg>...menu icon...</svg>
</button>
<!-- For links -->
<a href="/twitter" aria-label="Follow us on Twitter">
<svg>...twitter icon...</svg>
</a>
5. Missing Focus Indicators
What it means: When users Tab through your site, they can't tell which element is currently focused. This makes keyboard navigation impossible.
The Fix
Don't remove the default outline. If you must customize it, replace it with something equally visible:
/* Bad: removes focus indicator */
*:focus { outline: none; }
/* Good: custom focus style */
*:focus {
outline: 2px solid #4F6DF5;
outline-offset: 2px;
}
/* Better: only for keyboard users */
*:focus-visible {
outline: 2px solid #4F6DF5;
outline-offset: 2px;
}
6. Links That Say "Click Here"
What it means: Screen reader users often navigate by listing all links on a page. "Click here" and "Read more" are meaningless out of context.
The Fix
Make link text descriptive:
<!-- Bad -->
To see our pricing, <a href="/pricing">click here</a>.
<!-- Good -->
See our <a href="/pricing">pricing plans</a>.
<!-- Bad -->
<a href="/blog/post">Read more</a>
<!-- Good -->
<a href="/blog/post">Read more about accessibility lawsuits</a>
7. Missing Skip Link
What it means: Keyboard users have to Tab through your entire navigation menu on every page before reaching the main content.
The Fix
Add a skip link as the first focusable element. It can be visually hidden until focused:
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav>...navigation...</nav>
<main id="main">...content...</main>
</body>
/* CSS */
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px;
background: #000;
color: #fff;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
8. Videos Without Captions
What it means: Deaf and hard-of-hearing users can't understand video content.
The Fix
- Use YouTube or Vimeo's auto-caption feature as a starting point
- Review and correct auto-generated captions (they're often wrong)
- For important videos, use professional captioning services ($1-3/minute)
- Upload caption files (.srt, .vtt) to your video host
Prioritizing Fixes
If you have multiple violations, fix them in this order:
- Form labels—people can't contact you or buy without them
- Image alt text—most commonly cited in lawsuits
- Button/link names—critical for navigation
- Focus indicators—keyboard navigation depends on them
- Color contrast—affects large portions of your site
- Skip links—nice to have, less commonly cited
- Video captions—only if you have videos
Find your accessibility violations
Run a free scan to see exactly which issues your site has and how to fix them.
Scan Your Site FreeThe Bottom Line
Most accessibility violations are straightforward to fix once you know what to look for. The hard part is finding them—which is why automated scanning is so valuable.
Fix the issues on this list and you'll address 90% of what gets businesses sued. Document your fixes, schedule regular scans, and you'll stay ahead of the lawyers.