How to Make Your Website ADA Compliant
A practical, step-by-step guide to finding and fixing accessibility issues on your website. Covers the most common WCAG failures, code-level fixes, and what it costs — from DIY to full professional remediation.
Step 1: Audit your current state
Before you can fix accessibility issues, you need to know what they are. An automated scan tests your website against WCAG 2.1 Level AA criteria and gives you a baseline score with a prioritized list of violations.
Automated tools typically catch 30-40% of WCAG violations — but they catch the most common ones (contrast, alt text, labels, structure) which account for the majority of issues on most sites.
Start here — get your free compliance score in 30 seconds.
Scan Your Website FreeStep 2: Understand the requirements
ADA compliance for websites means conforming to WCAG 2.1 Level AA— the standard required by the DOJ's 2024 Title II rule and referenced in virtually all ADA web accessibility settlements.
WCAG 2.1 AA has 50 success criteria organized under four principles. You do not need to memorize all 50 — most websites fail on the same handful of common issues.
View the complete WCAG 2.1 AA checklistThe 10 most common accessibility issues (and how to fix them)
Based on the WebAIM Million 2024 study of 1,000,000 home pages. Fixing these covers the vast majority of automated detectable issues.
Low color contrast
WCAG 1.4.381% of home pagesText does not have enough contrast against its background, making it difficult or impossible to read for users with low vision.
Fix: Ensure a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Use a contrast checker tool to verify.
/* Bad: gray on white */
color: #999; background: #fff; /* 2.85:1 ratio */
/* Good: darker gray on white */
color: #595959; background: #fff; /* 7:1 ratio */Missing image alt text
WCAG 1.1.154% of home pagesImages without alt attributes are invisible to screen reader users. They cannot understand what the image conveys.
Fix: Add descriptive alt text to informative images. Use empty alt (alt="") for purely decorative images.
<!-- Bad -->
<img src="team-photo.jpg">
<!-- Good: informative image -->
<img src="team-photo.jpg" alt="Our team at the 2025 accessibility conference">
<!-- Good: decorative image -->
<img src="divider.png" alt="">Missing form input labels
WCAG 1.3.1, 3.3.246% of home pagesForm fields without associated labels leave screen reader users guessing what information to enter.
Fix: Use <label> elements with a for attribute matching the input's id, or wrap the input inside the label.
<!-- Bad: placeholder only -->
<input type="email" placeholder="Email">
<!-- Good: visible label -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">Empty links
WCAG 2.4.445% of home pagesLinks without text content (e.g., icon-only links) provide no information to screen readers about the link destination.
Fix: Add descriptive link text or an aria-label for icon-only links.
<!-- Bad: icon link with no text -->
<a href="/search"><svg>...</svg></a>
<!-- Good: aria-label -->
<a href="/search" aria-label="Search">
<svg aria-hidden="true">...</svg>
</a>Missing document language
WCAG 3.1.129% of home pagesWithout a lang attribute on the <html> element, screen readers cannot determine the correct language for pronunciation.
Fix: Add the lang attribute to your <html> tag.
<!-- Bad -->
<html>
<!-- Good -->
<html lang="en">Empty buttons
WCAG 4.1.228% of home pagesButtons without text content (icon-only buttons, buttons with only images) provide no information to screen readers.
Fix: Add visible text, aria-label, or an aria-labelledby reference.
<!-- Bad -->
<button><svg>...</svg></button>
<!-- Good -->
<button aria-label="Close dialog">
<svg aria-hidden="true">...</svg>
</button>Missing skip navigation
WCAG 2.4.1CommonWithout a skip-to-content link, keyboard users must Tab through the entire navigation on every page load.
Fix: Add a "Skip to main content" link as the first focusable element, visually hidden until focused.
<a href="#main-content" class="sr-only focus:not-sr-only">
Skip to main content
</a>
...
<main id="main-content">Keyboard inaccessible elements
WCAG 2.1.1CommonInteractive elements that only respond to mouse events (click, hover) exclude keyboard and screen reader users entirely.
Fix: Use native HTML elements (<button>, <a>) which are keyboard accessible by default. If using divs/spans, add tabindex, role, and keyboard event handlers.
<!-- Bad: div as button -->
<div onclick="submit()">Submit</div>
<!-- Good: native button -->
<button onclick="submit()">Submit</button>No focus indicator
WCAG 2.4.7CommonRemoving the default focus outline without providing an alternative makes it impossible for keyboard users to track their position.
Fix: Never remove :focus outlines without providing a visible replacement. Use :focus-visible for a cleaner UX.
/* Bad: removes all focus indicators */
*:focus { outline: none; }
/* Good: custom focus indicator */
:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}Inaccessible custom widgets
WCAG 4.1.2CommonCustom dropdowns, tabs, modals, and accordions built with divs lack the semantic information assistive technology needs.
Fix: Use ARIA roles, states, and properties to communicate widget behavior. Follow WAI-ARIA Authoring Practices patterns.
<!-- Custom tab with ARIA -->
<div role="tablist">
<button role="tab" aria-selected="true"
aria-controls="panel-1">Tab 1</button>
<button role="tab" aria-selected="false"
aria-controls="panel-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1">...</div>Step 3: Fix critical issues first
Prioritize by impact. Critical and serious issues block access entirely for some users — these are also the violations most likely to trigger complaints and lawsuits.
Fix immediately
- Missing alt text on informative images
- Keyboard traps (can't Tab out of an element)
- Missing form labels
- Empty links and empty buttons
- Missing document language
Fix soon
- Low color contrast text
- Missing skip navigation link
- No visible focus indicator
- Missing heading structure
- Non-descriptive link text
Step 4: Test with assistive technology
Automated tools catch the most common issues but miss context-dependent problems. Manual testing with assistive technology is essential for full compliance.
Keyboard navigation
Tab through your entire site without touching the mouse. Can you reach every link, button, and form field? Can you see where focus is? Can you operate all functionality?
Screen reader testing
Use VoiceOver (Mac), NVDA (Windows, free), or TalkBack (Android). Navigate your site by headings, links, and landmarks. Is the content understandable?
Zoom testing
Set browser zoom to 200%. Does all content remain visible and functional? No horizontal scrolling on text content?
Color testing
View your site in grayscale (browser extension). Is all information still understandable without color?
Step 5: Maintain compliance
Accessibility is not one-and-done. New content, code changes, third-party widgets, and CMS updates can introduce regressions. Build accessibility into your workflow:
- Re-scan after significant content or design changes
- Train content editors on alt text, heading structure, and link text best practices
- Include accessibility checks in your QA/code review process
- Publish an accessibility statement with contact info for reporting issues
How much does it cost to make a website ADA compliant?
DIY with free tools
$0Free automated scanners, browser DevTools, screen reader testing. Requires HTML/CSS knowledge and significant time investment.
Best for: Simple sites (under 20 pages) with common issues. Site owners with technical skills.
Automated scanning + reports
$19 - $200One-time or periodic automated scans with detailed reports, code-level fix instructions, and prioritized issue lists.
Best for: Most small-to-medium websites. Provides a clear roadmap your developer can follow.
Professional accessibility audit
$5,000 - $25,000Manual expert review combining automated tools with assistive technology testing. Includes detailed findings report and remediation guidance.
Best for: Large or complex sites, regulated industries, organizations needing compliance documentation.
Full remediation service
$10,000 - $50,000+End-to-end service: audit, code fixes, testing, and conformance documentation. Price depends on site size and complexity.
Best for: Organizations without in-house development resources or facing legal deadlines.
Frequently Asked Questions
How much does it cost to make a website ADA compliant?
Costs vary widely depending on complexity. DIY with free tools: $0 (plus your time). Automated scanning tools: $19-$200 per audit. Professional accessibility audit: $5,000-$25,000. Full remediation by a developer: $10,000-$50,000+. Simple sites (under 20 pages) with common issues like missing alt text and color contrast can often be fixed in-house for minimal cost. Complex web apps with custom widgets may require specialist help.
Can I make my website ADA compliant myself?
Yes, many common accessibility issues can be fixed without specialized expertise. The top 6 most common WCAG failures — missing image alt text, low color contrast, missing form labels, empty links, missing document language, and empty buttons — account for the vast majority of automated detectable issues and can be fixed with basic HTML knowledge. More complex issues like keyboard navigation, ARIA implementations, and custom widget accessibility may require developer expertise.
What are the most common ADA compliance issues on websites?
According to the WebAIM Million study (2024), the most common WCAG 2.1 AA failures are: 1) Low color contrast text (81% of home pages), 2) Missing alt text for images (54%), 3) Missing form input labels (46%), 4) Empty links (45%), 5) Missing document language (29%), 6) Empty buttons (28%). These six issues alone account for the vast majority of automatically detectable accessibility errors.