10 Common Accessibility Mistakes (And How to Fix Them)
Discover the most common accessibility mistakes found in websites today and learn exactly how to fix them with practical code examples.
Based on millions of accessibility scans, we've identified the 10 most common mistakes that prevent websites from being accessible. The good news? Most of these issues are easy to fix once you know what to look for.
1. Insufficient Color Contrast
The Problem: Text doesn't have enough contrast against its background, making it difficult for users with low vision or color blindness to read.
WCAG Requirement: Text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text) to meet Level AA standards.
❌ Bad Example
<p style="color: #777; background: #fff;"> This gray text is too light </p>
✅ Good Example
<p style="color: #595959; background: #fff;"> This text has sufficient contrast (7:1 ratio) </p>
How to Fix: Use a color contrast checker to verify your color combinations meet WCAG standards. Our scanner automatically generates compliant color alternatives for you.
2. Missing Alt Text on Images
The Problem: Images without alternative text leave screen reader users wondering what the image shows. This is one of the most widespread accessibility issues.
❌ Bad Example
<img src="chart.png">
✅ Good Example
<img src="chart.png" alt="Bar chart showing 45% increase in sales over Q4" >
Pro Tips:
- Describe the content and function, not just "image of..."
- For decorative images, use empty alt:
alt="" - Keep alt text concise (aim for under 150 characters)
- Don't start with "Image of" or "Picture of"
3. Empty Links and Buttons
The Problem: Links and buttons without text content or accessible labels don't tell users where they'll go or what action they'll perform.
❌ Bad Example
<a href="/profile"> <svg>...</svg> </a> <button onclick="submit()"> <i class="icon-save"></i> </button>
✅ Good Example
<a href="/profile" aria-label="View profile"> <svg aria-hidden="true">...</svg> </a> <button onclick="submit()" aria-label="Save changes"> <i class="icon-save" aria-hidden="true"></i> </button>
4. Missing Form Labels
The Problem: Form inputs without associated labels make it impossible for screen reader users to understand what information to enter.
❌ Bad Example
<input type="email" placeholder="Email">
✅ Good Example
<label for="email">Email Address</label> <input type="email" id="email" name="email" placeholder="you@example.com" >
Note: Placeholders are not a substitute for labels. Always use a visible <label> element or aria-label attribute.
5. Poor Keyboard Navigation
The Problem: Users can't navigate your site using only the keyboard. This affects power users, people with motor disabilities, and screen reader users.
Common Issues:
- Interactive elements can't receive keyboard focus
- No visible focus indicators
- Illogical tab order
- Keyboard traps (can't escape modals/menus)
✅ Good Example
/* Make custom buttons keyboard accessible */
<div
role="button"
tabindex="0"
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleClick();
}
}}
onClick={handleClick}
>
Click me
</div>
/* Add visible focus styles */
button:focus {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}Test it: Try navigating your entire site using only Tab, Shift+Tab, Enter, and arrow keys. Can you reach every interactive element?
6. Missing Document Language
The Problem: Without the lang attribute, screen readers don't know which language to use for pronunciation.
✅ Good Example
<html lang="en"> <head>...</head> <body>...</body> </html> <!-- For sections in different languages --> <blockquote lang="es"> Hola, mundo! </blockquote>
7. Improper Heading Hierarchy
The Problem: Skipping heading levels (e.g., H1 → H3) or using headings for styling instead of structure confuses screen reader users who navigate by headings.
❌ Bad Example
<h1>Page Title</h1> <h4>Subsection</h4> <!-- Skipped h2 and h3! --> <h2>Another section</h2> <!-- Out of order! -->
✅ Good Example
<h1>Page Title</h1> <h2>Main Section</h2> <h3>Subsection</h3> <h3>Another Subsection</h3> <h2>Another Main Section</h2>
Rules: One H1 per page, don't skip levels, and maintain logical order.
8. Non-Descriptive Link Text
The Problem: Links that say "click here" or "read more" don't tell users where they'll go. Screen reader users often navigate by links only.
❌ Bad Example
<a href="/guide">Click here</a> for the guide. <a href="/pricing">Learn more</a>
✅ Good Example
Read the <a href="/guide">WCAG 2.1 compliance guide</a>. <a href="/pricing">View pricing plans</a>
9. Missing Error Messages and Validation
The Problem: Forms don't clearly indicate errors or provide helpful guidance for fixing them.
✅ Good Example
<label for="password"> Password <span aria-label="required">*</span> </label> <input type="password" id="password" aria-describedby="pwd-error pwd-hint" aria-invalid="true" required > <p id="pwd-hint" className="hint"> Must be at least 12 characters </p> <p id="pwd-error" className="error" role="alert"> Password is too short </p>
10. Inaccessible Custom Components
The Problem: Custom dropdowns, modals, tabs, and other interactive components built from divs don't have proper ARIA roles and keyboard support.
Common Solutions:
- Use native HTML elements when possible (
<button>,<select>) - Add ARIA roles:
role="dialog",role="tablist", etc. - Implement keyboard navigation (Tab, Arrow keys, Escape)
- Manage focus properly (trap focus in modals, return focus on close)
- Use
aria-expanded,aria-hidden,aria-selected
Catch These Mistakes Automatically
Don't wait for complaints or lawsuits. Scan your website now to identify these common accessibility issues and get instant fix recommendations.
Start Free Scan →Conclusion
These 10 mistakes account for the majority of accessibility violations found in websites today. The good news is that most are straightforward to fix once you're aware of them.
Key Takeaways:
- Test with keyboard navigation
- Use semantic HTML elements
- Always provide text alternatives
- Check color contrast ratios
- Validate forms with helpful errors
- Use automated tools to catch common issues
- Test with actual screen readers
Remember: Automated testing catches about 30-40% of accessibility issues. Combine automated scans with manual testing and user feedback for complete coverage.