Skip to main content

ADA Website Compliance Checklist

Every WCAG 2.1 Level AA criterion explained in plain English with common failures and quick fixes. 49 criteria across 4 principles — the complete reference for meeting ADA requirements.

Government websites (50,000+ population) must comply by April 24, 202627 days away.

98%

of websites fail WCAG 2.1 AA

Source: WebAIM Million 2024

$75K+

average ADA lawsuit settlement

Source: UsableNet 2024

4,600+

ADA web lawsuits filed in 2024

Source: UsableNet 2024

Who must comply with ADA website requirements?

ADA Title II — Government

State and local governments, public universities, courts, DMVs, public transit agencies, and public libraries must meet WCAG 2.1 AA. Entities serving 50,000+ people have a deadline of April 24, 2026. Smaller entities have until April 24, 2027.

ADA Title III — Private Businesses

No specific deadline, but courts increasingly treat websites as "places of public accommodation." WCAG 2.1 AA is the standard referenced in virtually all settlements and consent decrees. Lawsuit filings hit 4,600+ in 2024 alone.

Check your website against this checklist automatically

Our free scanner tests your website against WCAG 2.1 AA criteria in under 30 seconds. No account required.

Scan Your Website Free
P

Perceivable

Content must be presentable in ways all users can perceive — text alternatives, captions, sufficient contrast.

1.1.1

Non-text Content

All images, icons, and non-text elements must have text alternatives (alt text) that serve the equivalent purpose.

Common failures

Images without alt attributes, decorative images not marked with empty alt, complex images without long descriptions, CAPTCHAs without alternatives.

How to fix

Add descriptive alt text to informative images. Use alt="" for purely decorative images. Provide text alternatives for audio/video content.

1.2.1

Audio-only and Video-only

Pre-recorded audio-only content needs a text transcript. Pre-recorded video-only content needs either a transcript or audio description.

Common failures

Podcasts without transcripts, background video without description.

How to fix

Provide transcripts for audio content and either transcripts or audio descriptions for video-only content.

1.2.2

Captions (Pre-recorded)

All pre-recorded video with audio must have synchronized captions.

Common failures

YouTube embeds without captions enabled, auto-generated captions not reviewed for accuracy.

How to fix

Add accurate synchronized captions to all video content. Review auto-generated captions for errors.

1.2.3

Audio Description or Media Alternative

Pre-recorded video must have audio description or a full text alternative describing visual content.

Common failures

Videos where important visual information is not conveyed through dialogue or narration.

How to fix

Add audio description track or provide a detailed text transcript covering visual elements.

1.2.5

Audio Description (Pre-recorded)

Audio description must be provided for all pre-recorded video content (Level AA strengthens 1.2.3).

Common failures

Educational or instructional videos where visual demonstrations are not described.

How to fix

Create an audio description track narrating important visual information during natural pauses.

1.3.1

Info and Relationships

Information, structure, and relationships conveyed visually must also be programmatically determinable through proper HTML.

Common failures

Using bold text instead of headings, tables without header cells, form fields without associated labels, lists not using list elements.

How to fix

Use semantic HTML: <h1>-<h6> for headings, <th> for table headers, <label> for form fields, <ul>/<ol> for lists.

1.3.2

Meaningful Sequence

When reading order matters, the correct sequence must be programmatically determinable.

Common failures

CSS positioning that changes visual order but not DOM order, content that only makes sense in a specific visual arrangement.

How to fix

Ensure DOM order matches visual reading order. Test by disabling CSS and verifying content still makes sense.

1.3.3

Sensory Characteristics

Instructions must not rely solely on shape, color, size, visual location, orientation, or sound.

Common failures

"Click the red button", "see the sidebar on the right", "the circular icon".

How to fix

Use multiple cues: "Click the Submit button (the red button at the bottom of the form)".

1.3.4

Orientation

Content must not restrict display to a single orientation (portrait or landscape) unless essential.

Common failures

Pages that only work in landscape mode, CSS that hides content in one orientation.

How to fix

Test in both orientations. Remove orientation-locked CSS unless the content genuinely requires it (e.g., a piano app).

1.3.5

Identify Input Purpose

Form fields collecting user information must have programmatically identifiable purpose using autocomplete attributes.

Common failures

Name, email, phone, and address fields without autocomplete attributes.

How to fix

Add autocomplete attributes: autocomplete="name", autocomplete="email", autocomplete="tel", etc.

1.4.1

Use of Color

Color must not be the only visual means of conveying information.

Common failures

Error states shown only by turning a field red, links distinguished only by color, required fields indicated only with color.

How to fix

Add a secondary indicator: icons, text labels, underlines, or patterns alongside color.

1.4.2

Audio Control

If audio plays automatically for more than 3 seconds, provide a mechanism to pause, stop, or control volume.

Common failures

Auto-playing background music or video with no controls.

How to fix

Avoid auto-playing audio. If necessary, provide visible pause/stop/volume controls.

1.4.3

Contrast (Minimum)

Text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or 14pt bold) needs 3:1.

Common failures

Light gray text on white backgrounds, text over images without contrast overlay, placeholder text with insufficient contrast.

How to fix

Use a contrast checker tool. Increase text darkness or background contrast. Add semi-transparent overlays behind text on images.

1.4.4

Resize Text

Text must be resizable up to 200% without loss of content or functionality.

Common failures

Fixed-height containers that clip text when zoomed, layouts that break at 200% zoom.

How to fix

Use relative units (rem, em, %) instead of fixed pixels. Test at 200% browser zoom.

1.4.5

Images of Text

Use actual text instead of images of text, unless essential (logos are exempt).

Common failures

Headers rendered as images, navigation items as image maps, infographics with embedded text.

How to fix

Replace images of text with styled HTML text. For infographics, provide the text content as accessible HTML.

1.4.10

Reflow

Content must reflow to fit a 320px-wide viewport without horizontal scrolling (except for data tables, images, maps).

Common failures

Fixed-width layouts, content that requires horizontal scrolling at 320px width.

How to fix

Use responsive design. Test at 320px viewport width (or 1280px at 400% zoom).

1.4.11

Non-text Contrast

UI components and graphical objects must have at least 3:1 contrast against adjacent colors.

Common failures

Low-contrast form borders, icon buttons that blend into background, chart segments with similar colors.

How to fix

Ensure borders, icons, and interactive elements have 3:1+ contrast against their background.

1.4.12

Text Spacing

Content must remain functional when users override text spacing (line height 1.5x, paragraph spacing 2x, word spacing 0.16x, letter spacing 0.12x).

Common failures

Text truncated or overlapping when spacing is increased, containers that overflow.

How to fix

Avoid fixed heights on text containers. Test with browser extensions that adjust text spacing.

1.4.13

Content on Hover or Focus

Tooltip or popup content triggered by hover/focus must be dismissible, hoverable, and persistent.

Common failures

Tooltips that disappear when moving mouse toward them, content that can't be dismissed without moving focus.

How to fix

Ensure hover content stays visible when pointer moves to it, can be dismissed with Escape, and persists until dismissed.

O

Operable

Navigation and interaction must work for everyone — keyboard access, enough time, no seizure triggers.

2.1.1

Keyboard

All functionality must be operable via keyboard without requiring specific timings.

Common failures

Dropdown menus only work on hover, drag-and-drop without keyboard alternative, click handlers on non-focusable elements.

How to fix

Ensure all interactions work with Tab, Enter, Space, Arrow keys, and Escape. Use <button> and <a> elements for interactive content.

2.1.2

No Keyboard Trap

Keyboard focus must never get trapped in a component without a way to escape using standard keys.

Common failures

Modal dialogs that don't return focus, embedded widgets that capture all keyboard input.

How to fix

Ensure Escape closes modals, Tab cycles through focusable elements, and focus returns to the trigger element.

2.1.4

Character Key Shortcuts

If single-character keyboard shortcuts exist, users must be able to turn them off, remap them, or they only activate on focus.

Common failures

Single-letter hotkeys that conflict with screen reader commands.

How to fix

Avoid single-character shortcuts, or provide settings to disable/remap them.

2.2.1

Timing Adjustable

If time limits exist, users must be able to turn off, adjust, or extend the time (at least 10x).

Common failures

Session timeouts without warning, auto-advancing carousels, timed form submissions.

How to fix

Warn users before timeout. Allow extension. Provide pause controls for auto-advancing content.

2.2.2

Pause, Stop, Hide

Auto-moving, blinking, or scrolling content lasting more than 5 seconds must have pause/stop controls. Auto-updating content must be pausable.

Common failures

Auto-scrolling news tickers, animated banners without pause, live feeds that can't be paused.

How to fix

Add visible pause/stop buttons for all auto-playing or auto-updating content.

2.3.1

Three Flashes or Below

Content must not flash more than 3 times per second.

Common failures

Rapidly flashing animations, video content with strobe effects.

How to fix

Limit flash frequency. Add warnings for photosensitive content. Provide option to disable animations.

2.4.1

Bypass Blocks

Provide a mechanism to skip repeated content blocks (e.g., "Skip to main content" link).

Common failures

No skip navigation link, repeated navigation on every page without bypass.

How to fix

Add a "Skip to main content" link as the first focusable element. Use landmark roles (main, nav, aside).

2.4.2

Page Titled

Every page must have a descriptive, unique <title> that identifies its topic.

Common failures

All pages with the same title, generic titles like 'Page 1', missing title elements.

How to fix

Write unique, descriptive titles: 'Contact Us - Company Name' rather than just 'Company Name'.

2.4.3

Focus Order

Focusable elements must receive focus in an order that preserves meaning and operability.

Common failures

Positive tabindex values that override natural order, modals that don't trap focus, focus jumping unexpectedly.

How to fix

Use natural DOM order. Avoid positive tabindex values. Manage focus programmatically for dynamic content.

2.4.4

Link Purpose (In Context)

The purpose of each link must be determinable from the link text alone or from the link plus its context.

Common failures

"Click here", "Read more", "Learn more" without additional context.

How to fix

"Read our accessibility guide" instead of "Click here". Use aria-label when link text alone is insufficient.

2.4.5

Multiple Ways

Provide more than one way to find a page (e.g., navigation menu plus search, or sitemap).

Common failures

Pages only accessible through a specific navigation path with no search or sitemap.

How to fix

Provide at least two of: navigation menu, search, sitemap, table of contents, or related links.

2.4.6

Headings and Labels

Headings and labels must describe the topic or purpose of the content they introduce.

Common failures

Vague headings like 'Section 1', form labels that don't describe the expected input.

How to fix

Use descriptive headings and labels. 'Your Email Address' instead of 'Field 3'.

2.4.7

Focus Visible

Keyboard focus must have a visible indicator on all interactive elements.

Common failures

CSS outline:none without replacement, focus indicators that blend into the background.

How to fix

Never remove focus outlines without providing an equally visible alternative. Use :focus-visible for modern browsers.

2.5.1

Pointer Gestures

Functionality using multi-point or path-based gestures must also work with single-pointer activation.

Common failures

Pinch-to-zoom as the only zoom method, swipe-only navigation, multi-finger gestures.

How to fix

Provide button alternatives for all gesture-based interactions.

2.5.2

Pointer Cancellation

Activation must occur on the up-event (mouseup/touchend), and actions must be reversible or abortable.

Common failures

Actions triggered on mousedown, drag operations with no way to cancel.

How to fix

Use click events (which fire on up-event) rather than mousedown/touchstart for activation.

2.5.3

Label in Name

UI components with visible text labels must have accessible names that include the visible text.

Common failures

A button that says 'Search' but has aria-label='Find content' — voice users say 'Click Search' but it doesn't match.

How to fix

Ensure aria-label starts with or matches the visible label text.

2.5.4

Motion Actuation

Functionality triggered by device motion (shaking, tilting) must have a UI alternative and be disableable.

Common failures

Shake-to-undo with no button alternative.

How to fix

Provide on-screen controls for any motion-triggered features.

U

Understandable

Content and interfaces must be clear — readable text, predictable behavior, error prevention.

3.1.1

Language of Page

The default language of each page must be programmatically identifiable.

Common failures

Missing lang attribute on the <html> element.

How to fix

Add lang="en" (or appropriate code) to the <html> tag.

3.1.2

Language of Parts

Content in a different language from the page default must be identified with a lang attribute.

Common failures

Spanish quotes on an English page without lang='es'.

How to fix

Wrap foreign-language content in a span with the appropriate lang attribute: <span lang="es">...

3.2.1

On Focus

Receiving keyboard focus must not trigger a change of context (page navigation, form submission, etc.).

Common failures

Tabbing to a select element triggers navigation, focusing a field opens a new window.

How to fix

Never change context on focus. Use explicit activation (button clicks) for context changes.

3.2.2

On Input

Changing a form control's value must not automatically cause a context change unless the user is warned.

Common failures

Selecting a country automatically submits the form, changing a dropdown navigates to a new page.

How to fix

Provide a submit button. If auto-submission is necessary, warn users before the control.

3.2.3

Consistent Navigation

Navigation mechanisms that appear on multiple pages must be in the same relative order.

Common failures

Navigation items reordered on different pages, footer links in inconsistent order.

How to fix

Keep navigation order consistent across all pages. Add new items at the end.

3.2.4

Consistent Identification

Components with the same functionality must be identified consistently.

Common failures

'Search' on one page and 'Find' on another for the same function, different icons for the same action.

How to fix

Use the same labels, icons, and patterns for the same functionality throughout the site.

3.3.1

Error Identification

Input errors must be automatically detected and described to the user in text.

Common failures

Error states shown only by color, error messages that don't specify what went wrong.

How to fix

Display specific text error messages near the field: 'Email address is required' rather than just highlighting the field.

3.3.2

Labels or Instructions

Labels or instructions must be provided for user input fields.

Common failures

Placeholder-only labels that disappear on focus, fields without visible labels, complex inputs without instructions.

How to fix

Use visible, persistent <label> elements. Add helper text for fields that need formatting instructions.

3.3.3

Error Suggestion

When an input error is detected and suggestions are known, provide them to the user.

Common failures

Saying 'Invalid date' without specifying the expected format.

How to fix

'Invalid date. Please use MM/DD/YYYY format.' Suggest corrections when possible.

3.3.4

Error Prevention (Legal, Financial, Data)

For pages that cause legal or financial commitments or modify user data: submissions must be reversible, checked for errors, or confirmed.

Common failures

One-click purchase with no confirmation, form submissions that can't be reviewed before sending.

How to fix

Add a confirmation step, allow editing before final submission, or provide a way to reverse the action.

R

Robust

Content must work with assistive technologies — semantic HTML, ARIA, proper name/role/value.

4.1.1

Parsing (Deprecated in WCAG 2.2)

HTML must be well-formed with complete start/end tags, proper nesting, unique IDs, and no duplicate attributes.

Common failures

Duplicate ID attributes, unclosed tags, malformed HTML.

How to fix

Validate HTML. Ensure unique IDs. Use standard HTML elements correctly.

4.1.2

Name, Role, Value

All UI components must have accessible names and roles. States and values must be programmatically set and notified to assistive technology.

Common failures

Custom dropdowns without ARIA roles, toggle buttons without state indication, icon buttons without labels.

How to fix

Use native HTML elements when possible. For custom widgets, add role, aria-label, and aria-expanded/aria-checked/aria-selected as appropriate.

4.1.3

Status Messages

Status messages must be announced by screen readers without receiving focus.

Common failures

Success/error messages that appear visually but aren't announced, loading indicators without live region.

How to fix

Use role="status" or role="alert" for dynamic status messages. Use aria-live="polite" for non-urgent updates.

Frequently Asked Questions

What is ADA compliance for websites?

ADA compliance for websites means making your web content accessible to people with disabilities, conforming to WCAG 2.1 Level AA standards. This includes providing alt text for images, ensuring keyboard navigability, maintaining sufficient color contrast, and using proper semantic HTML so assistive technologies like screen readers can interpret the content.

Is ADA website compliance legally required?

Yes. Under ADA Title II, state and local government entities serving populations of 50,000+ must make websites conform to WCAG 2.1 AA by April 24, 2026 (smaller entities by April 24, 2027). Under Title III, courts have increasingly ruled that private business websites are also covered by the ADA, though no specific technical standard is mandated — WCAG 2.1 AA is the de facto benchmark used in settlements and consent decrees.

What WCAG level do I need for ADA compliance?

WCAG 2.1 Level AA is the standard required by the DOJ's 2024 ADA Title II rule and is the most commonly referenced level in ADA lawsuits and settlements. Level A covers basic requirements, Level AA covers the most common barriers, and Level AAA is the highest standard but is not typically required for legal compliance.

How many WCAG 2.1 AA criteria are there?

WCAG 2.1 Level AA includes 50 success criteria across four principles: Perceivable (guidelines 1.1-1.4), Operable (guidelines 2.1-2.5), Understandable (guidelines 3.1-3.3), and Robust (guideline 4.1). Each criterion defines a specific accessibility requirement with testable success conditions.

Related Resources