Top 10 Accessibility Mistakes and How to Fix Them

After scanning thousands of websites, we have identified the 10 most common accessibility mistakes. The good news? Most of them are easy to fix. Here is each issue explained with before/after code.

1. Missing Alt Text on Images

Impact: Screen reader users have no idea what the image shows.

<!-- ❌ Before -->
<img src="team-photo.jpg" />

<!-- ✅ After -->
<img src="team-photo.jpg" alt="Our team of 12 engineers at the Istanbul office" />

2. Low Color Contrast

Impact: Users with low vision cannot read the text.

/* ❌ Before: 2.5:1 contrast ratio */
color: #999999; background: #ffffff;

/* ✅ After: 7:1 contrast ratio */
color: #595959; background: #ffffff;

3. Missing Form Labels

Impact: Screen reader users do not know what information to enter.

<!-- ❌ Before -->
<input type="email" placeholder="Email" />

<!-- ✅ After -->
<label for="email">Email</label>
<input type="email" id="email" placeholder="you@example.com" />

4. Empty Links and Buttons

Impact: Screen readers announce “link” or “button” with no context.

<!-- ❌ Before -->
<a href="/search"><i class="icon-search"></i></a>

<!-- ✅ After -->
<a href="/search" aria-label="Search">
  <i class="icon-search" aria-hidden="true"></i>
</a>

5. Missing Document Language

Impact: Screen readers may use the wrong pronunciation engine.

<!-- ❌ Before -->
<html>

<!-- ✅ After -->
<html lang="en">

6. Removing Focus Indicators

Impact: Keyboard users cannot see where they are on the page.

/* ❌ Before */
*:focus { outline: none; }

/* ✅ After */
*:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

7. Non-Semantic HTML

Impact: Assistive technologies cannot understand the page structure.

<!-- ❌ Before -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- ✅ After -->
<header>...</header>
<nav>...</nav>
<main>...</main>

8. Missing Skip Navigation

Impact: Keyboard users must tab through the entire navigation on every page.

<!-- ✅ Add at the very top of <body> -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>
<!-- ... navigation ... -->
<main id="main-content">...</main>

9. Auto-Playing Media

Impact: Disruptive for screen reader users and people with cognitive disabilities.

<!-- ❌ Before -->
<video autoplay>...</video>

<!-- ✅ After: No autoplay, provide controls -->
<video controls>...</video>

10. Improper Heading Hierarchy

Impact: Screen reader users navigate by headings; skipped levels create confusion.

<!-- ❌ Before: Skips h2 and h3 -->
<h1>Page Title</h1>
<h4>Subsection</h4>

<!-- ✅ After: Proper hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Automate Your Checks

While these fixes are straightforward, it is easy to miss them — especially on large sites. Use certvo.com to automatically detect all of these issues and get AI-generated code fixes for each one.