"The 10 Most Common Website Accessibility Issues (and How to Fix Them)"
WCAG Repair Team
The 10 Most Common Website Accessibility Issues (and How to Fix Them)
Automated accessibility scanners consistently flag the same set of common WCAG violations across millions of websites. These issues create real barriers for people who rely on assistive technologies, yet most of them are straightforward to fix. In this guide, we walk through the top 10 website accessibility issues, explain why each one matters, and show you exactly how to fix them with practical code examples.
1. Missing Alt Text on Images
What It Is
Images without alt attributes (or with empty alt text on meaningful images) leave screen reader users with no information about what the image conveys. This is one of the most common WCAG violations on the web.
Why It Matters
Screen readers announce images without alt text as "image" or read the filename, which is meaningless to the user. Alt text is required under WCAG 1.1.1 (Non-text Content).
How to Fix It
<!-- Bad -->
<img src="team-photo.jpg">
<!-- Good: Meaningful image -->
<img src="team-photo.jpg" alt="The WCAG Repair team at the 2026 accessibility summit">
<!-- Good: Decorative image -->
<img src="decorative-border.png" alt="" role="presentation">
Write alt text that conveys the purpose of the image. For decorative images, use an empty alt="" to tell screen readers to skip it.
2. Insufficient Color Contrast
What It Is
Text that does not have enough contrast against its background fails WCAG 1.4.3 (Contrast Minimum). Normal text requires a contrast ratio of at least 4.5:1, and large text requires at least 3:1.
Why It Matters
Low contrast text is difficult or impossible to read for users with low vision, color blindness, or anyone viewing a screen in bright sunlight. This affects a significant portion of your audience.
How to Fix It
/* Bad: light gray on white (ratio ~2:1) */
.subtitle {
color: #aaaaaa;
background-color: #ffffff;
}
/* Good: dark gray on white (ratio ~7:1) */
.subtitle {
color: #555555;
background-color: #ffffff;
}
Use a contrast checking tool to verify your color combinations meet the minimum ratios before shipping.
3. Missing Form Labels
What It Is
Form inputs without associated <label> elements leave screen reader users guessing what information is expected. This violates WCAG 1.3.1 (Info and Relationships).
Why It Matters
Without a label, a screen reader may announce a field as simply "edit text," giving the user no indication of what to type. Proper labels also increase the clickable area for all users.
How to Fix It
<!-- Bad -->
<input type="email" placeholder="Enter your email">
<!-- Good: Explicit label -->
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email">
<!-- Good: aria-label when visual label isn't possible -->
<input type="search" aria-label="Search the site">
Always use a <label> element with a matching for attribute. Use aria-label only when a visible label is not feasible.
4. Empty Links and Buttons
What It Is
Links or buttons that contain no text content, such as icon-only buttons without accessible names, are announced as "link" or "button" with no context. This fails WCAG 4.1.2 (Name, Role, Value).
Why It Matters
Users navigating by screen reader or voice control cannot identify or activate controls that have no accessible name. They become invisible barriers.
How to Fix It
<!-- Bad -->
<a href="/cart"><i class="icon-cart"></i></a>
<!-- Good -->
<a href="/cart" aria-label="View shopping cart"><i class="icon-cart"></i></a>
<!-- Bad -->
<button><svg>...</svg></button>
<!-- Good -->
<button aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>
Add descriptive text content, aria-label, or visually hidden text to every interactive element.
5. Missing Document Language
What It Is
When the <html> element lacks a lang attribute, screen readers cannot determine which language to use for pronunciation. This violates WCAG 3.1.1 (Language of Page).
Why It Matters
Without the language declaration, screen readers may mispronounce content or use the wrong speech synthesizer, making the page unintelligible.
How to Fix It
<!-- Bad -->
<html>
<!-- Good -->
<html lang="en">
This is a one-line fix. Set the lang attribute on the <html> element to the primary language of your page.
6. Missing Page Title
What It Is
Pages without a <title> element or with generic titles like "Untitled" fail WCAG 2.4.2 (Page Titled). The title is the first thing a screen reader announces when a page loads.
Why It Matters
Page titles help users identify content in browser tabs, bookmarks, and search results. Screen reader users rely on titles to know where they are.
How to Fix It
<!-- Bad -->
<title>Page</title>
<!-- Good -->
<title>Contact Us - WCAG Repair | Automated Accessibility Fixes</title>
Write unique, descriptive titles that identify the page content and the site. Follow the pattern "Page Name - Site Name."
7. Improper Heading Hierarchy
What It Is
Skipping heading levels (jumping from <h1> to <h4>, for example) or using headings purely for visual styling breaks the document outline. This violates WCAG 1.3.1 (Info and Relationships).
Why It Matters
Screen reader users navigate pages by heading structure. Skipped levels create confusion about how content is organized and make it harder to find information.
How to Fix It
<!-- Bad: Skips from h1 to h4 -->
<h1>Our Services</h1>
<h4>Web Auditing</h4>
<!-- Good: Sequential heading levels -->
<h1>Our Services</h1>
<h2>Web Auditing</h2>
<h3>Automated Scanning</h3>
<h3>Manual Review</h3>
<h2>Remediation</h2>
Use headings in sequential order. Style them with CSS rather than choosing heading levels based on appearance.
8. No Skip Navigation Link
What It Is
Without a "skip to main content" link, keyboard users must tab through every navigation item on every page before reaching the main content. This fails WCAG 2.4.1 (Bypass Blocks).
Why It Matters
Imagine pressing Tab 30 or more times before you can read the article you came for. Skip links let keyboard and screen reader users jump directly to the main content.
How to Fix It
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav><!-- navigation items --></nav>
<main id="main-content">
<!-- page content -->
</main>
</body>
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px 16px;
background: #000;
color: #fff;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
The link is hidden visually but becomes visible when focused via keyboard.
9. Missing Landmark Regions
What It Is
Pages that do not use HTML5 landmark elements (<header>, <nav>, <main>, <footer>) or ARIA landmark roles force screen reader users to navigate content linearly. This relates to WCAG 1.3.1 (Info and Relationships).
Why It Matters
Landmarks allow screen reader users to jump between major sections of a page. Without them, finding specific content on a long page becomes tedious.
How to Fix It
<!-- Bad: All divs -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Good: Semantic landmarks -->
<header>...</header>
<nav aria-label="Main navigation">...</nav>
<main>...</main>
<footer>...</footer>
Replace generic <div> wrappers with semantic HTML5 elements. When you have multiple <nav> or <aside> elements, give each a unique aria-label.
10. Keyboard Inaccessible Elements
What It Is
Interactive elements that cannot be reached or activated with a keyboard alone violate WCAG 2.1.1 (Keyboard). This often happens when click handlers are placed on <div> or <span> elements instead of proper interactive elements.
Why It Matters
Many users cannot use a mouse, including people with motor disabilities, power users, and screen reader users. If an element is not keyboard accessible, it is unusable for these audiences.
How to Fix It
<!-- Bad: Div acting as button -->
<div class="btn" onclick="submitForm()">Submit</div>
<!-- Good: Native button element -->
<button type="submit" onclick="submitForm()">Submit</button>
<!-- If you must use a div (rare cases) -->
<div role="button" tabindex="0"
onclick="submitForm()"
onkeydown="if(event.key==='Enter'||event.key===' ')submitForm()">
Submit
</div>
Always use native HTML elements (<button>, <a>, <input>) for interactive controls. They provide keyboard support, focus management, and proper semantics for free.
Start Fixing These Issues Today
These 10 accessibility issues account for the vast majority of WCAG violations found on the web. The good news is that most of them are quick to fix once you know what to look for. By addressing these common problems, you make your website more usable for everyone and reduce your legal risk.
Want to find and fix these issues automatically? Try WCAG Repair to scan your site, identify accessibility violations, and get guided fixes you can apply in minutes -- no accessibility expertise required.