March 2, 2026•18 min read

How to Make Your Website ADA Compliant: 10-Step Guide (2026)

Q: What is the standard for ADA website compliance?

WCAG 2.1 Level AA is the widely accepted standard for ADA website compliance. It includes 50 specific success criteria organized under four principles: Perceivable (content must be presentable to all senses), Operable (interface must be navigable by all users), Understandable (information and operation must be clear), and Robust (content must work with assistive technologies). While the DOJ has stated WCAG is not the 'official' ADA standard, nearly all settlements and court orders reference WCAG 2.1 AA.

Q: How much does it cost to make a website ADA compliant?

Costs vary widely based on website complexity. A simple small business website (5-20 pages) typically costs $1,000-$5,000 for initial remediation. Medium-complexity sites (20-100 pages) run $5,000-$25,000. Large e-commerce sites or web applications can cost $25,000-$100,000+. Ongoing monitoring costs $50-$500/month. These costs are significantly less than the average ADA lawsuit settlement of $5,000-$25,000, plus $10,000-$50,000 in defense attorney fees. The IRS Disabled Access Credit (Form 8826) lets small businesses claim up to $5,000 annually for accessibility improvements.

Q: Can I use an accessibility overlay or widget to become ADA compliant?

No. Accessibility overlays and widgets do not make websites ADA compliant. The FTC fined overlay provider accessiBe $1 million in 2025 for deceptive claims about their product's ability to ensure compliance. The National Federation of the Blind has publicly opposed overlays, and over 800 accessibility professionals signed a statement calling them harmful. Overlays add a JavaScript layer on top of existing accessibility barriers rather than fixing the underlying code. Businesses using overlays have still been sued — and some courts have specifically noted that overlay use does not constitute compliance.

Q: Do I need to make my website accessible if I have a physical store?

Yes. If your business is open to the public and has a website, your website likely needs to be accessible under the ADA. Courts have ruled that websites of businesses with physical locations are extensions of their 'place of public accommodation.' Furthermore, recent court rulings in Wisconsin (2025) confirmed that even online-only businesses with no physical location must comply with the ADA. The 2024 Title II rule also explicitly covers state and local government websites.

Q: What are the most common ADA website violations?

According to the WebAIM Million report analyzing the top 1 million websites, the most common violations are: low color contrast (81% of pages), missing alternative text for images (54%), empty links (49%), missing form input labels (46%), empty buttons (28%), and missing document language (17%). These six issue types account for over 95% of all detected errors. Most are straightforward to fix: adding alt text takes seconds per image, fixing color contrast requires updating CSS values, and adding form labels typically requires one HTML attribute per field.

Q: How do I maintain ADA compliance after initial fixes?

ADA compliance is not a one-time project — it requires ongoing monitoring. Websites change constantly through content updates, plugin updates, design changes, and third-party integrations, any of which can introduce new accessibility barriers. Best practices include: running automated scans monthly (tools like RatedWithAI can monitor continuously), testing with keyboard navigation after any major update, including accessibility checks in your content publishing workflow, training staff who update the website, and conducting a manual audit annually. Businesses that set up ongoing monitoring are far less likely to face repeat lawsuits.

Over 4,000 ADA website lawsuits are filed every year. The average settlement costs small businesses $5,000 to $25,000 — before attorney fees. The good news? Making your website ADA compliant isn't as complicated as it sounds. This guide walks you through every step, with specific instructions, code examples, and free tools you can use today.

What ADA Website Compliance Actually Means

The Americans with Disabilities Act (ADA) requires businesses open to the public to provide equal access to their goods and services. Courts have consistently ruled that this extends to websites — your digital storefront is just as much a "place of public accommodation" as your physical one.

In practice, ADA website compliance means conforming to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standard. This is the benchmark used in virtually every ADA lawsuit settlement, DOJ agreement, and compliance checklist.

WCAG is built on four principles — known as POUR:

👁️ Perceivable

Content must be presentable to users in ways they can perceive. This means providing text alternatives for images, captions for videos, and ensuring content isn't reliant on a single sense.

⌨️ Operable

Users must be able to navigate and interact with your site using various input methods — keyboard, screen reader, voice control, or switch devices.

🧠 Understandable

Information and interface operation must be understandable. Text should be readable, navigation predictable, and input assistance available for forms.

🔧 Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies like screen readers and braille displays.

Key legal context: While the DOJ has stated WCAG is not the "official" ADA standard, every major settlement agreement, consent decree, and court order references WCAG 2.1 AA. For practical purposes, WCAG 2.1 AA is the target.

Step 1: Run an Accessibility Audit

Before fixing anything, you need to know what's broken. An accessibility audit scans your website for WCAG violations and gives you a prioritized list of issues to fix.

Free Tools for Your Initial Audit

RatedWithAI Scanner (Recommended)

Our free accessibility scanner gives you an instant accessibility score with specific issues categorized by severity. Run it on your homepage to get a baseline, then scan your most important pages — contact, products/services, and checkout.

WAVE (Web Accessibility Evaluation Tool)

Free browser extension from WebAIM that shows errors directly on your page with visual indicators. Great for understanding exactly where issues are located.

Google Lighthouse

Built into Chrome DevTools (press F12 → Lighthouse tab). Includes an accessibility audit alongside performance and SEO checks. Good for a quick overview but catches fewer issues than specialized tools.

Important: Automated tools typically catch only 30-40% of accessibility issues. They're essential for finding technical violations (missing alt text, low contrast, broken ARIA), but can't evaluate whether alt text is actually meaningful or whether a user flow makes sense. For a complete accessibility audit, you'll also need manual testing (covered in Step 4).

What to Scan First

Don't try to scan every page at once. Focus on the pages that matter most legally and practically:

Homepage — Your most visited and most likely to be tested by plaintiffs
Contact page — Must be accessible for people to reach you
Products/services pages — Core business function
Checkout/booking flow — Where transactions happen
Navigation menu — Gateway to all content
Any page with forms — Sign-up, inquiry, support

Step 2: Add Alternative Text to All Images

Missing alt text is the most common accessibility violation, appearing on 54% of all web pages according to the WebAIM Million study. It's also one of the easiest to fix.

How Alt Text Works

Screen readers announce images by reading their alt attribute. Without it, users hear something like "image" or the file name ("IMG_4532.jpg") — completely useless.

HTML

<!-- ❌ Bad: No alt text -->
<img src="team-photo.jpg">

<!-- ❌ Bad: Useless alt text -->
<img src="team-photo.jpg" alt="image">

<!-- ✅ Good: Descriptive alt text -->
<img src="team-photo.jpg" alt="Five team members standing in the office lobby, smiling">

<!-- ✅ Good: Decorative image (empty alt) -->
<img src="divider-line.png" alt="">

Alt Text Rules

Informative images — Describe what the image shows and why it matters. Keep it under 125 characters when possible.
Functional images (buttons, links) — Describe the action, not the image. A search icon button should have alt="Search", not alt="magnifying glass icon".
Decorative images — Use empty alt (alt="") so screen readers skip them. Horizontal rules, background textures, and purely decorative graphics fall here.
Complex images (charts, infographics) — Provide a brief alt text plus a longer description nearby or linked via aria-describedby.
Never start with "Image of..." or "Picture of..." — the screen reader already announces it's an image.

Platform-Specific Instructions

WordPress: Click any image in the media library → fill in the "Alternative Text" field in the right sidebar
Shopify: Products → edit product → click image → "Add alt text"
Squarespace: Click image → Design tab → "Image Description (Alt Text)"
Wix: Click image → Settings icon → "What's in this image?" field

Step 3: Fix Color Contrast Issues

Low color contrast is the #1 accessibility violation, affecting 81% of web pages. WCAG 2.1 AA requires:

Normal text: Minimum contrast ratio of 4.5:1 against background
Large text (18pt+ or 14pt+ bold): Minimum 3:1 ratio
UI components and graphics: Minimum 3:1 ratio

Common Contrast Failures

AaLight gray text on white — Ratio: ~2.5:1 ❌

AaMedium gray on white — Ratio: ~4.5:1 ✅ (just passes)

AaDark gray on white — Ratio: ~15:1 ✅ (excellent)

How to Fix Contrast

Use a contrast checker tool (WebAIM Contrast Checker, Colour Contrast Analyser, or Chrome DevTools)
Identify failing color combinations in your CSS
Darken text or lighten backgrounds until you hit the 4.5:1 ratio
Pay special attention to: placeholder text, disabled states, links within paragraphs, footer text, and text overlaid on images

CSS — Before and After

/* ❌ Before: Light gray text fails contrast */
.subtitle { color: #999999; } /* 2.85:1 ratio */

/* ✅ After: Darker gray passes contrast */
.subtitle { color: #595959; } /* 7:1 ratio */

Step 4: Make Everything Keyboard Accessible

Many people with motor disabilities, visual impairments, or repetitive stress injuries navigate websites entirely with a keyboard — no mouse. Every interactive element must be reachable and operable via keyboard alone.

The Tab Test (Do This Right Now)

Open your website and press Tab repeatedly. Watch for these issues:

Can you see where you are? There should be a visible focus indicator (outline, highlight) on the currently selected element. If elements "disappear" when you tab to them, your CSS is likely removing the default focus outline.
Can you reach everything? Every link, button, form field, dropdown, modal, and interactive element should be reachable by tabbing.
Is the order logical? Tab order should follow the visual reading order (top-to-bottom, left-to-right for LTR languages).
Can you activate everything? Press Enter on links and buttons, Space on checkboxes and buttons.
Can you escape? Modals, dropdowns, and overlays should be dismissible with Escape. Focus should return to the element that triggered them.

Common Keyboard Failures and Fixes

CSS — Don't Remove Focus Outlines

/* ❌ NEVER do this */
*:focus { outline: none; }

/* ✅ Instead, style the focus indicator */
*:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

HTML — Use Correct Elements

<!-- ❌ Bad: div with click handler (not keyboard accessible) -->
<div onclick="doSomething()">Click me</div>

<!-- ✅ Good: Actual button (keyboard accessible by default) -->
<button onclick="doSomething()">Click me</button>

<!-- ❌ Bad: Span styled as a link -->
<span class="link" onclick="navigate()">Go to page</span>

<!-- ✅ Good: Actual link -->
<a href="/page">Go to page</a>

Pro tip: Use native HTML elements (<button>, <a>, <input>, <select>) whenever possible. They come with built-in keyboard support, focus management, and screen reader announcements. Custom JavaScript widgets require significantly more work to make accessible.

Step 5: Label All Forms and Inputs

Missing form labels affect 46% of web pages. When a screen reader encounters an input without a label, the user has no idea what information to enter. This makes contact forms, checkout flows, and sign-up pages completely unusable.

Every Input Needs a Label

HTML — Form Labels

<!-- ❌ Bad: No label -->
<input type="email" placeholder="Enter your email">

<!-- ❌ Bad: Placeholder is NOT a label -->
<!-- Placeholders disappear when typing and are often low contrast -->

<!-- ✅ Good: Explicit label -->
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="name@example.com">

<!-- ✅ Also good: Wrapping label -->
<label>
  Email Address
  <input type="email" placeholder="name@example.com">
</label>

Error Messages and Validation

Identify errors clearly: Use aria-invalid="true" on fields with errors
Describe the error: Use aria-describedby to link error messages to inputs
Don't rely on color alone: Red borders aren't enough — add text or icons
Announce errors to screen readers: Use aria-live="polite" on error containers
Required fields: Mark them with aria-required="true" and visible indicators

HTML — Accessible Error Messages

<label for="phone">Phone Number <span aria-hidden="true">*</span></label>
<input type="tel" id="phone" aria-required="true"
  aria-invalid="true" aria-describedby="phone-error">
<p id="phone-error" role="alert" class="error">
  Please enter a valid phone number (e.g., 555-123-4567)
</p>

Step 6: Structure Content with Proper Headings

Screen reader users often navigate by headings — it's their equivalent of scanning a page visually. Proper heading structure is critical for making your content usable.

Heading Rules

One H1 per page: This should be your page title
Don't skip levels: Go H1 → H2 → H3. Don't jump from H1 to H3
Use headings for structure, not styling: If you need big text, use CSS — don't use an H2 just because it looks bigger
Make headings descriptive: "Our Services" is better than "More Info"

HTML — Proper Heading Hierarchy

<!-- ❌ Bad: Skipped levels, styled for size -->
<h1>Welcome to Our Store</h1>
<h4>Featured Products</h4>  <!-- Skipped H2 and H3! -->
<h2>Contact Us</h2>

<!-- ✅ Good: Logical hierarchy -->
<h1>Welcome to Our Store</h1>
  <h2>Featured Products</h2>
    <h3>Spring Collection</h3>
    <h3>Best Sellers</h3>
  <h2>Contact Us</h2>

Also add landmark roles to major page sections using HTML5 semantic elements:

<header> — Site header/navigation area
<nav> — Navigation menus
<main> — Primary content area (one per page)
<footer> — Site footer
<aside> — Sidebar content
<section> and <article> — Content sections

Step 7: Fix Links and Buttons

Empty links (49% of pages) and empty buttons (28% of pages) are among the most common violations. Screen reader users navigate by pulling up a list of all links on a page — if your links say "click here" or "read more" or nothing at all, they're useless out of context.

Link Best Practices

HTML — Descriptive Links

<!-- ❌ Bad: Meaningless link text -->
<a href="/pricing">Click here</a>
<a href="/report.pdf">Read more</a>

<!-- ✅ Good: Descriptive link text -->
<a href="/pricing">View our pricing plans</a>
<a href="/report.pdf">Download the 2026 accessibility report (PDF, 2.1MB)</a>

<!-- ❌ Bad: Empty link (icon with no text) -->
<a href="/cart"><i class="icon-cart"></i></a>

<!-- ✅ Good: Icon link with accessible name -->
<a href="/cart" aria-label="Shopping cart (3 items)">
  <i class="icon-cart" aria-hidden="true"></i>
</a>

Button Best Practices

Icon-only buttons must have aria-label — e.g., a hamburger menu icon needs aria-label="Open navigation menu"
Toggle buttons should use aria-pressed or aria-expanded to communicate state
Links vs. buttons: Use links (<a>) for navigation, buttons (<button>) for actions. Don't make a button that navigates or a link that triggers an action

Step 8: Make Multimedia Accessible

If your website includes video, audio, or animations, accessibility requirements apply to each:

Video

Captions: All pre-recorded video with audio must have synchronized captions. Auto-generated captions (YouTube, etc.) are a start but require editing for accuracy
Audio descriptions: For videos where important visual content isn't described in the narration, provide audio descriptions or a text transcript
Transcripts: Provide a full text transcript as an alternative for all video and audio content
No autoplay: Video and audio should not play automatically. If they do, they must pause within 3 seconds or provide a mechanism to stop them

Animation and Motion

Respect motion preferences: Use the prefers-reduced-motion CSS media query to disable animations for users who have enabled reduced motion in their operating system settings
No flashing: Content must not flash more than 3 times per second (seizure risk)
Pause controls: Any auto-updating content (carousels, tickers, animated banners) must have pause/stop controls

CSS — Respecting Motion Preferences

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Step 9: Ensure Responsive and Zoom-Friendly Design

WCAG 2.1 requires that content remains usable when zoomed to 200% and when viewed on different screen sizes. Many users with low vision rely on browser zoom or text enlargement settings.

Requirements

200% zoom: All content and functionality must work at 200% browser zoom without horizontal scrolling (for content that scrolls vertically)
Text reflow: Content should reflow to fit the viewport at 320 CSS pixels wide (equivalent to 1280px at 400% zoom)
No fixed-size containers: Avoid fixed pixel widths that prevent content from reflowing
Touch targets: Interactive elements should be at least 24×24 CSS pixels (44×44 is the recommended target for mobile)
Don't disable pinch-to-zoom: Never use maximum-scale=1 or user-scalable=no in your viewport meta tag

HTML — Correct Viewport Meta Tag

<!-- ❌ Bad: Prevents zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- ✅ Good: Allows zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Step 10: Publish an Accessibility Statement

An accessibility statement demonstrates your commitment to accessibility and provides a channel for users to report issues. While not strictly required by the ADA, it's strongly recommended and required under some regulations (like the European Accessibility Act).

What to Include

Commitment statement: Declare your commitment to accessibility
Standard targeted: Specify WCAG 2.1 Level AA
Known limitations: Be honest about areas still being remediated
Contact method: Provide email, phone, and/or form for reporting barriers
Date: Include when the statement was last reviewed
Response commitment: State how quickly you'll respond to reports (2-5 business days is standard)

For a complete template and detailed guidance, see our Accessibility Statement Guide with Free Template.

Legal benefit: An accessibility statement with a feedback mechanism can demonstrate good faith in the event of a lawsuit. Courts look favorably on businesses that are actively working toward compliance. Having a public statement shows you're aware of the requirement and taking action — which is very different from ignoring it entirely.

Platform-Specific Guides

The steps above apply universally, but each website platform has its own quirks, settings, and plugins. We've written detailed guides for the most popular platforms:

📘 WordPress

Theme selection, accessibility plugins, Gutenberg editor tips, and custom code fixes

🛒 Shopify

Theme accessibility, product page compliance, checkout flow, and app considerations

⬛ Squarespace

Template limitations, built-in features, manual fixes, and third-party solutions

🔶 Wix

Wix Accessibility Wizard, Velo customizations, and Editor X responsive design

Ongoing Monitoring: Why One-Time Fixes Aren't Enough

Here's what most guides don't tell you: making your website accessible once is not enough. Businesses get sued again even after settling previous lawsuits. Why? Because websites change constantly:

Content updates — New blog posts, product listings, or pages may lack alt text, proper headings, or labeled forms
Plugin/theme updates — A WordPress plugin update can introduce new accessibility barriers overnight
Third-party integrations — Chat widgets, analytics popups, payment forms, and embedded content are common violation sources
Design changes — New color schemes, layouts, or navigation redesigns can break previous accessibility work
New team members — Staff who don't know accessibility best practices may unknowingly create barriers

The RatedWithAI approach: Our free accessibility scanner lets you check any page instantly. For ongoing protection, set up regular monitoring to catch issues before they become lawsuit material. Think of it like a smoke detector — you want to know about problems before someone else finds them.

Monitoring Best Practices

Weekly: Automated scan of your key pages (homepage, contact, products, checkout)
Monthly: Full-site automated scan plus spot-check of new content
Quarterly: Manual testing with keyboard navigation and screen reader
Annually: Comprehensive professional audit including user testing with people with disabilities

Cost Breakdown: DIY vs. Professional Remediation

Understanding costs helps you budget appropriately. Here's what to expect based on the size and complexity of your website:

Small Business Website (5-20 Pages)

DIY fixes (this guide): $0-$500 (your time + possible premium plugin)
Freelance developer: $1,000-$3,000
Accessibility agency: $3,000-$5,000
Ongoing monitoring: $50-$200/month

Medium Business Website (20-100 Pages)

DIY fixes: $500-$2,000 (time-intensive)
Freelance developer: $3,000-$10,000
Accessibility agency: $5,000-$25,000
Ongoing monitoring: $100-$500/month

E-Commerce / Web Application (100+ Pages)

Professional remediation: $25,000-$100,000+
Ongoing monitoring + maintenance: $500-$2,000/month
Annual audit: $5,000-$30,000

Tax credit available: The IRS Disabled Access Credit (Form 8826) lets eligible small businesses claim up to $5,000 per year for accessibility expenditures. Businesses with $1 million or less in revenue or 30 or fewer full-time employees qualify. This can offset a significant portion of your remediation costs.

The cost of NOT complying: The average ADA website lawsuit settlement is $5,000-$25,000 for small businesses, plus $10,000-$50,000 in defense attorney fees. In California, statutory damages under the Unruh Act start at $4,000 per visit. Proactive compliance costs a fraction of what a single lawsuit would cost.

Quick-Start Checklist: Fix the Biggest Issues First

If you can only spend an hour today, focus on these high-impact fixes in order:

1Run a free scan at RatedWithAI.com to see your current score and top issues
2Add alt text to all images on your homepage and top 5 most-visited pages
3Fix color contrast — update any light gray text to a darker shade
4Label your forms — add <label> elements to every input field on contact and sign-up forms
5Test with Tab key — navigate your homepage with keyboard only and fix any traps or missing focus indicators
6Set page language — add lang="en" to your <html> tag (one line of code, fixes 17% of violations)

These six fixes alone address over 95% of the most common accessibility violations. Then work through the remaining steps in this guide at your own pace.

Frequently Asked Questions

Is ADA website compliance legally required?

Yes. Under Title III of the ADA, businesses open to the public must provide equal access to their goods and services, which courts have consistently interpreted to include websites. The DOJ's 2024 Title II rule explicitly requires government websites to meet WCAG 2.1 Level AA by April 2026. For private businesses, there is no specific federal regulation yet, but over 4,000 ADA website lawsuits are filed annually, and courts routinely rule that commercial websites must be accessible.

What is the standard for ADA website compliance?

WCAG 2.1 Level AA is the widely accepted standard. It includes 50 specific success criteria organized under four principles: Perceivable, Operable, Understandable, and Robust. While the DOJ has stated WCAG is not the "official" ADA standard, nearly all settlements and court orders reference WCAG 2.1 AA as the target conformance level.

How much does it cost to make a website ADA compliant?

Costs vary by website complexity. A simple small business website (5-20 pages) typically costs $1,000-$5,000 for initial remediation. Medium sites run $5,000-$25,000. Large e-commerce sites can cost $25,000-$100,000+. These costs are significantly less than the average ADA lawsuit settlement of $5,000-$25,000, plus $10,000-$50,000 in defense attorney fees. The IRS Disabled Access Credit lets small businesses claim up to $5,000 annually.

Can I use an accessibility overlay or widget to become ADA compliant?

No. Accessibility overlays do not make websites ADA compliant. The FTC fined overlay provider accessiBe $1 million for deceptive claims. The National Federation of the Blind has publicly opposed overlays, and over 800 accessibility professionals signed a statement calling them harmful. Businesses using overlays have still been sued.

How long does it take to make a website ADA compliant?

For a typical small business website, initial remediation takes 2-6 weeks. This includes running an accessibility audit (1-2 days), fixing critical issues like missing alt text and form labels (1-2 weeks), addressing navigation and keyboard accessibility (1-2 weeks), and testing with assistive technologies (2-3 days). More complex sites can take 3-6 months. Prioritize high-impact fixes first — homepage, contact page, and core user journeys.

Do I need to make my website accessible if I have a physical store?

Yes. Courts have ruled that websites of businesses with physical locations are extensions of their "place of public accommodation." Furthermore, recent court rulings confirmed that even online-only businesses must comply with the ADA. The 2024 Title II rule also explicitly covers state and local government websites with deadlines in April 2026 and April 2027.

What are the most common ADA website violations?

According to the WebAIM Million report: low color contrast (81% of pages), missing alternative text (54%), empty links (49%), missing form input labels (46%), empty buttons (28%), and missing document language (17%). These six issue types account for over 95% of all detected errors — and all are addressed in this guide.

How do I maintain ADA compliance after initial fixes?

ADA compliance requires ongoing monitoring. Websites change constantly through content updates, plugin updates, and third-party integrations. Run automated scans monthly, test keyboard navigation after major updates, include accessibility checks in your content workflow, train website staff, and conduct a manual audit annually. Tools like RatedWithAI can help you monitor continuously.

Start With a Free Accessibility Scan

Find out exactly where your website stands. Our AI-powered scanner checks your pages against WCAG 2.1 AA and gives you a prioritized action plan — no sign-up required.

Scan Your Website Free →

Takes 30 seconds. No email required. See your score instantly.