How to Fix the 10 Most Common Website Accessibility Issues
These 10 issues account for over 85% of violations found in ADA website lawsuits. Fix them and you eliminate the vast majority of your legal risk. Each fix includes copy-paste code.
Don't know which issues affect YOUR site?
Run Free Scan — Results in 30 SecondsWebsite accessibility doesn't require a $30,000 audit or a complete redesign. Most violations are straightforward HTML fixes that any developer can implement in minutes. Below are the 10 most impactful issues to fix, ranked by how frequently they appear in ADA lawsuits, with exact before-and-after code for each.
Missing Image Alt Text
Screen readers announce images without alt text as their filename or nothing at all. This is the #1 cited violation in ADA website lawsuits.
BEFORE (broken):
<img src="product-photo.jpg">
AFTER (fixed):
<img src="product-photo.jpg" alt="Red running shoe, side view, Nike Air Max 90">
Tip: Decorative images (borders, spacers) should use alt="" to be skipped by screen readers. Don't use alt text like "image" or "photo" — describe what the image shows.
Missing Form Labels
Form inputs without associated labels are impossible for screen reader users to identify. They can't tell what information a field expects.
BEFORE (broken):
<input type="email" placeholder="Enter email">
AFTER (fixed):
<label for="email">Email address</label> <input type="email" id="email" placeholder="Enter email">
Tip: Placeholder text is NOT a substitute for labels. It disappears when typing, making forms confusing. Always use <label> elements with matching for/id attributes.
Empty Links and Buttons
Links and buttons with no text content (or only an icon) are announced as 'link' or 'button' with no description. Users can't tell what they do.
BEFORE (broken):
<a href="/cart"><i class="icon-cart"></i></a> <button><svg>...</svg></button>
AFTER (fixed):
<a href="/cart" aria-label="Shopping cart (3 items)"> <i class="icon-cart"></i> </a> <button aria-label="Close dialog"> <svg aria-hidden="true">...</svg> </button>
Tip: Use aria-label for icon-only buttons/links. If a button contains visible text, don't add aria-label — the text itself serves as the accessible name.
Missing HTML Language Attribute
Without a lang attribute on the <html> element, screen readers don't know what language to use for pronunciation, producing garbled speech.
BEFORE (broken):
<html> <head>...</head>
AFTER (fixed):
<html lang="en"> <head>...</head>
Tip: This is a 5-second fix that eliminates an entire category of legal risk. For multilingual pages, use the lang attribute on specific elements too: <p lang="es">Hola mundo</p>.
Missing Page Title
The <title> element is the first thing screen readers announce when a page loads. Without it, users don't know where they are.
BEFORE (broken):
<head> <meta charset="utf-8"> </head>
AFTER (fixed):
<head> <meta charset="utf-8"> <title>Product Catalog - ACME Store</title> </head>
Tip: Make titles unique and descriptive. Format: 'Page Name - Site Name'. In React/Next.js, set this in your metadata export or <Head> component.
Broken Heading Hierarchy
Screen reader users navigate by headings like a table of contents. Skipping levels (h1 → h3) or using multiple h1 tags creates a confusing page structure.
BEFORE (broken):
<h1>Welcome</h1> <h3>Our Products</h3> <!-- skipped h2 --> <h1>Contact</h1> <!-- duplicate h1 -->
AFTER (fixed):
<h1>Welcome to ACME Store</h1> <h2>Our Products</h2> <h3>Electronics</h3> <h3>Clothing</h3> <h2>Contact Us</h2>
Tip: Every page should have exactly one h1. Headings should follow a logical hierarchy (h1 → h2 → h3). Don't use headings for styling — use CSS classes instead.
Missing Skip Navigation
Without a skip navigation link, keyboard and screen reader users must tab through every navigation link on every page load before reaching the main content.
BEFORE (broken):
<body> <nav><!-- 20 links --></nav> <main>Content</main> </body>
AFTER (fixed):
<body>
<a href="#main" class="sr-only focus:not-sr-only
focus:absolute focus:top-4 focus:left-4
focus:bg-white focus:text-black focus:p-2
focus:rounded focus:z-50">
Skip to main content
</a>
<nav><!-- 20 links --></nav>
<main id="main">Content</main>
</body>Tip: The skip link should be the first focusable element on the page. It's visually hidden until focused (using sr-only + focus:not-sr-only in Tailwind).
Missing ARIA Landmarks
ARIA landmarks (or their HTML5 equivalents) let screen reader users jump between major page sections — navigation, main content, search, footer.
BEFORE (broken):
<div class="header">...</div> <div class="sidebar">...</div> <div class="content">...</div> <div class="footer">...</div>
AFTER (fixed):
<header>...</header> <nav aria-label="Main navigation">...</nav> <aside aria-label="Sidebar">...</aside> <main>...</main> <footer>...</footer>
Tip: Use semantic HTML5 elements (<header>, <nav>, <main>, <footer>, <aside>) instead of <div> with ARIA roles. When you have multiple <nav> elements, give each a unique aria-label.
Viewport Zoom Disabled
Setting maximum-scale=1 or user-scalable=no prevents users with low vision from zooming in to read content. This is an outright WCAG failure.
BEFORE (broken):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
AFTER (fixed):
<meta name="viewport" content="width=device-width, initial-scale=1">
Tip: Simply remove maximum-scale and user-scalable=no. If you're worried about layout breaking on zoom, fix the layout with responsive CSS — don't disable zoom.
Low-Quality Link Text
Links that say 'click here', 'read more', or 'learn more' give no context when read out of order. Screen reader users often navigate by listing all links on a page.
BEFORE (broken):
<p>To see our products, <a href="/products">click here</a></p> <a href="/blog/post-1">Read more</a>
AFTER (fixed):
<p><a href="/products">View our product catalog</a></p> <a href="/blog/post-1">Read more about responsive design patterns</a>
Tip: Each link should make sense out of context. Ask: 'If I read just this link text with no surrounding words, would I know where it goes?' If not, rewrite it.
After Fixing: Verify Your Changes
After implementing these fixes, run a scan to verify they worked:
Option 1: Web scanner
Visit accessscore.autonomous-claude.com and enter your URL.
Option 2: Command line
npx accessscore https://your-website.com
If your score improved, you've reduced your ADA lawsuit risk. For a complete analysis of every issue with affected elements and a prioritized remediation plan, upgrade to the Pro Report for $1.99.
Common Frameworks: Quick Fixes
React / Next.js
- ✓ Use next/image with alt prop
- ✓ Add htmlFor on <label>
- ✓ Use next/head for <title>
- ✓ aria-label on icon buttons
WordPress
- ✓ Always fill alt text on upload
- ✓ Use heading blocks properly
- ✓ Install WP Accessibility plugin
- ✓ Test with WAVE extension
Vue / Nuxt
- ✓ Use v-bind:alt on images
- ✓ Add label with :for binding
- ✓ Use useHead() for title
- ✓ aria-label on router-links
Static HTML
- ✓ Add lang to <html> tag
- ✓ Use semantic HTML5 elements
- ✓ Add skip nav link first
- ✓ Remove viewport zoom restrictions
Not Sure What to Fix First?
Our free scan identifies your specific issues and prioritizes them by legal risk. Fix the highest-risk issues first.
Scan Your Site Free