Skip to main content

How to Make Your Website ADA Compliant

ADA website compliance means meeting WCAG 2.2 AA. Here is a step-by-step process: scan for violations, fix the common ones, test with a keyboard and screen reader, then monitor ongoing.

There is no one-click solution for ADA compliance. Accessibility is a property of your HTML, CSS, and JavaScript, and fixes must be made in the code. Here is the process that actually works.

Step 1: Run an Automated Scan

Start with an automated scan to identify the violations you can measure objectively. OnePageAudit scans your page and checks for:

  • Images missing alt text (WCAG 1.1.1)
  • Form inputs missing labels (WCAG 1.3.1, 4.1.2)
  • Missing page language declaration (WCAG 3.1.1)
  • Missing or empty page title (WCAG 2.4.2)
  • Empty links and buttons with no accessible name (WCAG 2.4.4)
  • Missing skip navigation link (WCAG 2.4.1)
  • Missing or broken heading hierarchy (WCAG 1.3.1)
  • Missing viewport meta tag
  • Autoplaying media (WCAG 1.4.2)

These are the violations that appear in the majority of demand letters and lawsuits. Fix them first.

Run the scan on your homepage, your highest-traffic pages, and your checkout or contact form pages. These are the pages targeted most often.

Step 2: Fix Images

Every tag needs an alt attribute.

  • Informative images: Write alt text that describes what the image communicates, not just what it shows. A chart showing sales growth should say "Bar chart showing 40% revenue growth from Q1 to Q4" not "chart.png."
  • Decorative images: Use alt="" (empty string, not missing). This tells screen readers to skip the image.
  • Image links: The alt text must describe the link destination. A logo that links to the homepage should say alt="OnePageAudit homepage" not alt="logo."

Step 3: Fix Form Labels

Every form field needs a programmatically associated label. There are two correct methods:

Method 1: Explicit label element ` ` Method 2: ARIA label (when a visible label is not possible) ` `

Do not use placeholder text as a substitute for a label. Placeholders disappear when the user types, leaving the field unlabeled. Placeholder text also typically fails color contrast requirements.

Step 4: Fix Heading Structure

Screen reader users navigate pages by jumping between headings. A logical heading structure is essential.

Requirements:

  • One

    per page that describes the page topic

  • for major sections,

    for subsections within those

  • No skipped levels (do not go from

    to

    )

  • Do not use heading elements purely for visual styling

If your CMS or theme generates heading levels for visual effect (using

because it looks the right size), you need to fix this. Use CSS classes to achieve the visual style, and use the semantically correct heading level.

Step 5: Add Skip Navigation

A skip navigation link allows keyboard users to bypass the navigation menu that repeats on every page.

Add this as the first element inside :

` Skip to main content `

Then add id="main-content" to your main content wrapper. The link is visually hidden by default but becomes visible when a keyboard user tabs to it. This is WCAG 2.4.1.

Step 6: Fix Color Contrast

WCAG 1.4.3 requires:

  • Normal text: contrast ratio of at least 4.5:1 against background
  • Large text (18pt or 14pt bold): at least 3:1
  • Interactive components and focus indicators: at least 3:1

Common failures: light gray body text on white backgrounds, light-colored button text, placeholder text, and icon-only buttons without sufficient contrast.

Use a tool like WebAIM's Contrast Checker (webaim.org/resources/contrastchecker) to check specific color pairs. Chrome DevTools also shows contrast ratios in the Accessibility panel.

When fixing contrast, adjust the text color or background color rather than increasing font size. Verify the fix in your actual implementation since CSS can override design values.

Step 7: Ensure Keyboard Accessibility

Tab through your entire site without using a mouse. For every interactive element, verify:

  • You can reach it with the Tab key
  • You can activate it with Enter or Space (buttons and links)
  • You can dismiss modals and dropdowns with the Escape key
  • The focus indicator is always visible (never hidden by CSS outline: none)

Custom widgets built from

elements need ARIA roles and keyboard event handlers to work properly with assistive technology. If your site has dropdown menus, accordions, tabs, modals, or carousels, test each one with keyboard-only navigation.

Step 8: Declare Page Language

Every page must declare its language in the element:

` `

Screen readers use this attribute to select the correct text-to-speech pronunciation engine. For pages with sections in another language, use the lang attribute on the specific element.

Step 9: Fix Empty Links and Buttons

Links and buttons with no accessible name are completely unusable for screen reader users. Common causes:

  • Icon links with no alt text or aria-label: ...
  • Placeholder links:
  • Buttons with only an icon child with no accessible name

Fix by adding:

  • aria-label="View cart" to the link or button
  • Or a visually hidden View cart inside the element
  • Or alt text on the image/icon if it is an `

Step 10: Test with a Screen Reader

Automated tools catch roughly 30-50% of WCAG issues. Screen reader testing catches the rest.

  • NVDA (Windows): Free download at nvaccess.org. Use with Chrome or Firefox.
  • VoiceOver (macOS/iOS): Built in. Enable with Cmd+F5 on Mac.
  • TalkBack (Android): Built in. Enable in Accessibility settings.

Navigate your critical pages with a screen reader. Listen for: Is every page region announced? Can you understand form instructions? Are error messages read aloud? Can you follow the flow of content?

Maintaining Compliance

ADA compliance is not a one-time project. Content updates, plugin changes, and new features can introduce new violations. At minimum:

  • Run an automated scan after every major release
  • Check new content types (new form types, new page templates) manually
  • Keep records of your testing and remediation for documentation purposes
Run a free scan now to see where your site stands before starting fixes. Related reading:

Frequently Asked Questions

How much does it cost to make a website ADA compliant?⌄
Cost depends heavily on the current state of the site. Fixing common issues on a small website (alt text, form labels, color contrast, skip navigation) can often be done in a day or two of developer time. Larger sites with complex custom UI components, legacy code, or video content requiring captions can cost significantly more. A free automated scan is the right starting point since it shows the scope of work before you budget.
Do I need to hire a specialist to make my website ADA compliant?⌄
Not necessarily. Many common violations are straightforward to fix with standard HTML and CSS knowledge: adding alt attributes to images, associating labels with form fields, adding a skip navigation link, fixing heading hierarchy. Complex issues like making custom JavaScript widgets keyboard-accessible may require a developer with accessibility experience. For most small business websites, a developer familiar with WCAG can handle the common fixes.
Can I use an overlay widget to make my site ADA compliant?⌄
No. Accessibility overlay widgets (scripts that inject a toolbar onto your site) do not achieve WCAG conformance. They do not fix the underlying HTML and CSS issues that screen readers depend on. EcomBack's H1 2025 lawsuit data found that 22.6% of sued websites had overlay widgets installed. These products provide no legal protection and have faced lawsuits from disability advocacy groups directly.
How do I know when my website is ADA compliant?⌄
There is no single certification that confers ADA compliance. The practical test is whether your site meets WCAG 2.2 Level AA across its pages. Automated tools catch the issues with clear pass/fail rules. Manual keyboard testing and screen reader testing cover the rest. Keep records of your testing process and remediation work, since courts look at good-faith efforts.

Related Resources

Industry Guides

ADA compliance for ecommerce, healthcare, restaurants, and more.

ADA Compliance Guide

Complete guide to WCAG 2.2 requirements and remediation.

Compliance Checklist

Step-by-step checklist to audit your website yourself.

Scan your website free

Find ADA compliance issues in under 60 seconds. No account required.

Run Free Scan