How to make a website ADA compliant

Before you start: pick the target

The ADA gives a business no technical checklist, so the plan needs a target you can test against. Use WCAG 2.2 Level AA. It covers WCAG 2.1 Level AA, the working target for a business site, adds six newer criteria at A and AA and drops 4.1.1 Parsing: 55 success criteria in all. Why that is the working target, and what the law does and does not say, is in ADA compliant website: what the law asks; how claims reach a business is in ADA website lawsuits. This page is the how.

One split decides who does each fix. Your platform or theme controls the page frame: menus, the cart, the checkout, the focus ring. You control what you put in it: images, colours, videos, forms you build, PDFs. On WordPress or Shopify the first half is a theme and plugin question; on a hand-built site it is your developer's. The plan works either way.

Step 1: List your pages and templates

You do not test every page; you test every kind of page. W3C's evaluation method, WCAG-EM 2.0, starts the same way: define the scope, find the common page types and the tasks the site exists for, then pick a sample that covers them, with a random 10% on top of the structured set to catch surprises.

For a small business site, write down:

• Each template: home, a service or product page, a blog post, the contact page, any landing page.
• Each task from start to finish: send the contact form, book, add to cart and check out, sign in.
• Each embed you did not build: a booking widget, a map, a chat box, a payment page on another domain.
• Your documents: menus, price lists and forms posted as PDFs.

The ADA website checklist walks the same page parts, from the menu to the footer, one plain test at a time; it makes a good first pass before Step 2.

The tasks matter most. WCAG judges a process as a whole: if one page of a checkout fails, the checkout does not conform, however good the other pages are.

Step 2: Run an automated scan

Run a free checker on one page of each template from your list. A scanner is fast at the mechanical fails: missing alt attributes, low contrast, empty links, fields with no label, a missing page language. Fix-once-fix-everywhere problems in a template show up on every page that uses it, so the list from step 1 keeps this short.

DOJ says the same thing in its own guidance: a clean report does not mean a site is accessible. Treat the scan as the list of things you know about, not a pass. The checkers worth running are compared in accessibility testing tools compared, and two checks on this site cover the commonest fails one item at a time: the contrast check and the alt text check.

Step 3: Test by keyboard and screen reader

The keyboard pass

Put the mouse away, click in the address bar and press Tab through each template and each task. You are checking five things: everything works from the keyboard (2.1.1), you never get stuck (2.1.2), a skip link or similar lets you jump past the menu (2.4.1), the order makes sense (2.4.3), and you can always see where you are (2.4.7), with nothing sticky covering it (2.4.11). The focus order checklist walks this with you and prints a record.

The screen reader pass

A screen reader reads the code, not the picture, so it hears problems you cannot see. Two cost nothing: NVDA, a free, open-source screen reader for Windows from NV Access, and VoiceOver, the screen reader built into macOS (Command-F5 turns it on and off). On one page per template, listen for a page title that says where you are (2.4.2), headings that outline the page (1.3.1), links that make sense on their own or in their sentence (2.4.4), a spoken label on every field and button (3.3.2, 4.1.2) and images described or skipped as they should be (1.1.1). If the first session is bewildering, that is normal; screen reader testing for owners covers the few commands you need.

Two quick zoom checks

Zoom the browser to 200% and confirm nothing is cut off or overlaps (1.4.4). Then narrow the window to phone width, which WCAG puts at 320 CSS pixels, and confirm you never have to scroll sideways to read (1.4.10).

Step 4: Fix in the source, by priority

Merge the scan and the manual notes into one list, then work it in this order. The rule behind the order: first whatever stops someone finishing a task, then whatever repeats on every page, then the one-off items.

1. 1. Forms

   1.3.13.3.13.3.24.1.2

   A visible label tied to every field, instructions before the field, errors named in text next to the field, and buttons with real names. Details in ADA compliant forms.

   Why here: A form that fails stops the task, and the task is the reason the site exists.

2. 2. Navigation and keyboard

   2.1.12.1.22.4.12.4.32.4.7

   A menu that opens by keyboard, a skip link, a sensible tab order and a focus ring that is never removed; the CSS for the ring is in focus indicators.

   Why here: One fix in the header template repairs every page at once.

3. 3. Contrast and colour

   1.4.31.4.111.4.1

   Text at 4.5:1 (large text 3:1), control edges and focus rings at 3:1, and never colour alone. Test every pair at once in the colour palette check.

   Why here: Usually a handful of brand colours, so a short list of changes.

4. 4. Images

   1.1.1

   Alt text that says what the image is for, and empty alt on pure decoration. Patterns for products, logos and charts are in alt text examples.

   Why here: Content work an owner can do without a developer.

5. 5. Video and audio

   1.2.21.2.41.2.5

   Accurate captions on recorded video, captions on live streams, and audio description where the picture carries information the soundtrack does not. See video caption requirements.

   Why here: Each video is its own job, so it comes after the fixes that repeat.

6. 6. Documents and PDFs

   1.3.11.1.12.4.2

   Fix in the source file and export a tagged PDF, or post the same content as a web page. The method is in how to make a PDF accessible.

   Why here: Fix the ones people need to act on first: forms, menus, price lists.

Step 5: Retest

Run steps 2 and 3 again on the same pages, then add a few pages you did not test the first time. Fixes break other things: a new label pushes a button off a phone screen, a restyled menu loses its focus ring. W3C's method compares the planned sample with a random one for the same reason; if the random pages turn up new kinds of fail, the first sample missed something.

Record each criterion as passed, failed or not applicable, with the date and the pages. The WCAG 2.2 AA checklist prints as that record. This is also the moment to decide whether you want an outside opinion: who tests by hand, and what they hand back, is in WCAG audit services compared.

Step 6: Publish an accessibility statement

W3C's guidance says a statement should contain at least three things: a commitment to accessibility, the standard you apply (for example WCAG 2.2), and contact details for anyone who meets a problem. It also advises listing known limitations, in plain words. W3C's own example: write "videos do not have captions" rather than a criterion number.

The contact line earns its place twice. DOJ's guidance notes that a way to report problems lets owners fix them, and an email that reaches a person is a far better first contact than a demand letter. The accessibility statement generator writes one from a short form. Say "we aim to meet WCAG 2.2 Level AA", never "this site is ADA compliant".

Step 7: Keep it up

A site that met WCAG in spring can fail by summer: one new hero image without alt text, one video posted without captions, one new plugin with a keyboard trap. Build the checks into publishing instead of repeating the whole project:

• Every new image gets alt text, or empty alt if it is decoration, before it is published.
• Every new video goes up with checked captions, not the raw automatic ones.
• Every new PDF is checked, or its content is posted as a page as well.
• Every new colour, button style or plugin gets a contrast check and a Tab-key pass.
• After any redesign or theme update, repeat steps 2, 3 and 5 on the templates it touched.

Track your plan

This is general information, not legal advice. For your own situation, ask a lawyer.