The 10 Most Common Accessibility Errors (and How to Avoid Them)

Reading time: 8 minutes

As a developer, you know this: Accessibility sounds complex and overwhelming. But the truth is: 80% of problems arise from 10 recurring mistakes. Let's go through them together – with practical examples and immediate solutions.

Spoiler: After this article, you'll probably test your website immediately!

1. Missing Alt Text for Images 📸

The Problem:

<!-- ❌ Bad -->
<img src="team-meeting.jpg">

<!-- ❌ Also bad -->
<img src="team-meeting.jpg" alt="IMG_1234">

The Solution:

<!-- ✅ Good -->
<img src="team-meeting.jpg" alt="Five people discussing around a conference table">

<!-- ✅ Decorative images -->
<img src="decoration.jpg" alt="" role="presentation">

Why this is important:
Screen readers read "IMG_1234" literally. Imagine hearing that 50 times on one page.

Quick Fix:

• Describe what's visible in the image, not that it's an image
• Decorative images get alt=""
• Icons need descriptive texts: alt="Warning" instead of alt="Icon"

---

2. Poor Color Contrast 🎨

The Problem: Gray text (#999) on white background (#FFF) = Contrast ratio 2.85:1
WCAG requires: 4.5:1 for normal text

The Solution:

/* ❌ Bad - 2.85:1 */
.text-light {
  color: #999999;
  background: #ffffff;
}

/* ✅ Good - 7.0:1 */
.text-accessible {
  color: #333333;
  background: #ffffff;
}

/* ✅ Even better - 10.4:1 */
.text-high-contrast {
  color: #1a1a1a;
  background: #ffffff;
}

Testing Tools:

• WebAIM Contrast Checker
• Browser DevTools: Lighthouse Audit
• Our tool: Automatically detects contrast problems

Pro Tip:
Dark text on light backgrounds is usually safer than the reverse.

---

3. No Keyboard Navigation 🎹

The Problem:
Many users cannot use a mouse. Your website must work with Tab, Enter, and arrow keys.

Test it yourself:

1. Press the Tab key
2. Can you reach every link/button?
3. Do you always see where you are (focus indicator)?
4. Can you open and close menus?

The Solution:

/* ✅ Clear focus indicators */
a:focus,
button:focus,
input:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ❌ Never hide the focus */
*:focus {
  outline: none; /* DON'T DO THIS! */
}

For complex components:

// Dropdown with keyboard support
function handleKeyDown(event) {
  switch (event.key) {
    case 'Escape':
      closeDropdown();
      break;
    case 'ArrowDown':
      event.preventDefault();
      focusNextItem();
      break;
    case 'ArrowUp':
      event.preventDefault();
      focusPreviousItem();
      break;
  }
}

---

4. Missing or Poor Form Labels 📝

The Problem:

<!-- ❌ Screen reader doesn't know what this field is -->
<input type="email" placeholder="Email Address">

<!-- ❌ Label is not linked -->
<label>Email</label>
<input type="email">

The Solution:

<!-- ✅ Perfectly linked -->
<label for="email">Email Address *</label>
<input type="email" id="email" required>

<!-- ✅ Alternative with aria-label -->
<input type="email" aria-label="Email Address" required>

<!-- ✅ Grouped fields -->
<fieldset>
  <legend>Shipping Address</legend>
  <label for="street">Street</label>
  <input type="text" id="street">
</fieldset>

For error handling:

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="pwd-error">
<div id="pwd-error" role="alert">
  Password must be at least 8 characters long
</div>

---

5. Non-semantic HTML 🏗️

The Problem:

<!-- ❌ Everything is a div -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="title">Heading</div>
  </div>
</div>

The Solution:

<!-- ✅ Semantically correct -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Heading</h1>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2025 My Website</p>
</footer>

Why this is important:

• Screen readers can navigate through headings
• <main> marks the main content
• <nav> indicates navigation
• Better SEO

---

6. Videos Without Subtitles or Transcripts 🎥

The Problem:

<!-- ❌ Deaf users cannot understand anything -->
<video src="product-video.mp4" controls></video>

The Solution:

<!-- ✅ With subtitles -->
<video controls>
  <source src="product-video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-de.vtt" srclang="de" label="Deutsch">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
</video>

<!-- ✅ Additionally: Transcript -->
<details>
  <summary>Show video transcript</summary>
  <p>Speaker: Welcome to our product video...</p>
</details>

WebVTT Example:

WEBVTT

00:00.000 --> 00:03.000
Welcome to our product video.

00:04.000 --> 00:08.000
Today we'll show you the most important features.

---

7. Touch Targets Too Small (Mobile) 📱

The Problem: Buttons and links smaller than 44x44 pixels are hard to hit.

The Solution:

/* ✅ Minimum size for touch targets */
.button,
.link {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* ✅ For small icons: Increase padding */
.icon-button {
  padding: 12px;
  background: transparent;
  border: none;
}

Quick Check:
Can you easily hit all buttons with your thumb?

---

8. Missing Skip Links 🦘

The Problem:
Keyboard users have to tab through 50+ navigation elements to reach the main content.

The Solution:

<!-- ✅ Skip link at the very beginning -->
<a href="#main" class="skip-link">Skip to main content</a>

<nav><!-- Navigation --></nav>

<main id="main">
  <!-- Main content -->
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

---

9. Auto-playing Media 🔊

The Problem:
Videos or audio that start automatically are problematic for many users.

Why this is bad:

• Startles users with hearing aids
• Overwhelms people with attention deficits
• Wastes data volume
• Interferes with screen readers

The Solution:

<!-- ❌ Never autoplay audio/video -->
<video autoplay><!-- DON'T --></video>

<!-- ✅ User decides -->
<video controls poster="preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

For background videos:

<!-- ✅ Muted and with pause button -->
<video autoplay muted loop>
  <source src="background.mp4">
</video>
<button onclick="pauseBackgroundVideo()">
  Pause video
</button>

---

10. Unclear Error Messages ❌

The Problem:

<!-- ❌ User doesn't know what's wrong -->
<div class="error">Error submitting</div>

The Solution:

<!-- ✅ Specific and helpful -->
<div role="alert" class="error">
  <h3>Error submitting the form</h3>
  <ul>
    <li><a href="#email">Email: Please enter a valid email address</a></li>
    <li><a href="#password">Password: At least 8 characters required</a></li>
  </ul>
</div>

For live validation:

function validateEmail(input) {
  const errorElement = document.getElementById('email-error');
  
  if (!input.value.includes('@')) {
    errorElement.textContent = 'Email must contain an @';
    errorElement.setAttribute('role', 'alert');
    input.setAttribute('aria-describedby', 'email-error');
  }
}

---

The 2-Minute Self-Test 🕐

Test your website right now:

1. Tab Test: Navigate using only the Tab key
2. Zoom Test: Zoom to 200%
3. Contrast Test: View in bright sunlight
4. Audio Test: Use without sound
5. Mouse Test: Unplug your trackpad

Found a problem? You're not alone – 98% of all websites have accessibility issues.

---

Tools That Help You 🛠️

Automated Tests (30% of problems)

• Our Accessibility Checker – Fast and comprehensive
• axe DevTools – Browser extension
• WAVE – Free from WebAIM

Manual Tests (70% of problems)

• Keyboard Navigation – Use only Tab key
• Screen Reader – NVDA (Windows, free)
• Contrast Checker – WebAIM Tool
• Color Blindness Simulator – Colorblinding.com

---

Conclusion: Start Small, Make a Big Impact 🚀

The good news: You don't have to start perfectly. Fix one error at a time:

Week 1: Add alt texts
Week 2: Check form labels
Week 3: Improve contrasts
Week 4: Test keyboard navigation

Every improvement makes your website usable for more people.

The bad news: These 10 errors are just the beginning. WCAG 2.1 has over 78 success criteria.

The good news: With our tool, you can find most automatically detectable problems in seconds.

---

Ready for the Accessibility Check?
Test your website now and get a detailed list of all found problems – including suggested solutions.

Test for free now →

---

Which of these errors sounds familiar? Let us know in the comments! 👇