Top 10 Accessibility Mistakes and How to Fix Them

These are ten of the most common accessibility mistakes, each with before/after code. In October 2026 we added how often each one appeared in the Certvo Web Accessibility Report 2026, an automated scan of 1,569 websites, wherever an axe-core rule measures it. Mistakes without a figure (focus indicators, non-semantic markup, skip links, auto-play) are not measured directly by those rules, so check them by hand.

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" />

In our 2026 data: 27.6% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core image-alt rule. Step-by-step fix: /fix/missing-alt-text.

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;

In our 2026 data: 51.4% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core color-contrast rule. Step-by-step fix: /fix/low-color-contrast.

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" />

In our 2026 data: 6.5% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core label rule. Step-by-step fix: /fix/missing-form-labels.

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>

In our 2026 data: 50.1% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core link-name rule (links). Step-by-step fix: /fix/empty-link.

In our 2026 data: 19.0% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core button-name rule (buttons). Step-by-step fix: /fix/empty-button.

5. Missing Document Language

Impact: Screen readers may use the wrong pronunciation engine.

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

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

In our 2026 data: 4.5% of the 1,569 sites in the Certvo Web Accessibility Report 2026 failed the axe-core html-has-lang rule. Step-by-step fix: /fix/missing-lang.

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>
        <RuleNote id="heading-order" />
        <RuleNote id="page-has-heading-one" label="no level-one heading" />

        <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.