5 Common Accessibility Mistakes (and How to Fix Them)

Even with the best intentions, developers often make common accessibility mistakes that can significantly impact users with disabilities. Let's explore five of the most frequent issues and how to fix them.

1. Missing Alternative Text for Images

WCAG Criterion: 1.1.1 Non-text Content

The Problem: Images without alt attributes are invisible to screen reader users.

The Fix:

<!-- Bad -->
<img src="logo.png">

<!-- Good -->
<img src="logo.png" alt="A11yied - Web Accessibility Made Simple">

<!-- Decorative images -->
<img src="decoration.png" alt="">

Always provide descriptive alt text for meaningful images. For decorative images, use an empty alt attribute (alt="") so screen readers skip them.

2. Poor Color Contrast

WCAG Criterion: 1.4.3 Contrast (Minimum)

The Problem: Low contrast between text and background makes content difficult or impossible to read for users with low vision or color blindness.

The Fix:

• Aim for a contrast ratio of at least 4.5:1 for normal text
• Large text (18pt+ or 14pt+ bold) needs at least 3:1
• Use tools like the A11yied scanner to check your contrast ratios

/* Bad - insufficient contrast */
.text {
  color: #777;
  background: #fff;
}

/* Good - sufficient contrast */
.text {
  color: #333;
  background: #fff;
}

3. Non-Descriptive Link Text

WCAG Criterion: 2.4.4 Link Purpose (In Context)

The Problem: Links that say "click here" or "read more" don't provide context when read out of order by screen readers.

The Fix:

<!-- Bad -->
<a href="/article">Click here</a> to read our WCAG guide

<!-- Good -->
<a href="/article">Read our complete WCAG compliance guide</a>

Make your links descriptive and meaningful on their own.

4. Missing Form Labels

WCAG Criterion: 3.3.2 Labels or Instructions

The Problem: Form inputs without proper labels are unusable for screen reader users and can confuse everyone.

The Fix:

<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="[email protected]">

Always associate labels with form inputs using the for and id attributes.

5. Keyboard Navigation Issues

WCAG Criterion: 2.1.1 Keyboard

The Problem: Interactive elements that can't be accessed via keyboard exclude users who can't use a mouse.

The Fix:

• Ensure all interactive elements are keyboard accessible
• Maintain a logical tab order
• Provide visible focus indicators

/* Good - visible focus indicator */
button:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

Test your site by navigating with only your keyboard (using Tab, Enter, and arrow keys).

Summary

Here's a quick reference of the issues covered:

1. Missing alt text → Add descriptive alt attributes (Impact: High)
2. Poor contrast → Use 4.5:1 ratio for text (Impact: High)
3. Bad link text → Make links descriptive (Impact: Medium)
4. Missing labels → Connect labels with for/id (Impact: High)
5. No keyboard access → Make elements focusable (Impact: Critical)

---

Conclusion

These five issues represent some of the most common accessibility barriers on the web. The good news is they're all relatively easy to fix once you're aware of them.

Use A11yied to scan your website and identify these issues automatically. We'll provide specific recommendations for each problem we find, making it easy to improve your site's accessibility.