WCAG 2.1 AA Compliance Checklist for 2026

WCAG 2.1 AA has 50 success criteria across 13 guidelines organized under 4 principles. This checklist focuses on the criteria most critical for government websites and most commonly flagged in ADA Title II complaints.

1. Perceivable — Information Must Be Presentable to All Users

1.1 Text Alternatives

All images have descriptive alt text HIGH IMPACT

Informational images: <img alt="Chart showing 20% increase in site visits">. Decorative images: <img alt="">. Never use "image of" or "photo of" — describe what the image conveys.

See how 321 websites scored →

View the 2026 Report

Complex images (charts, infographics) have extended descriptions

Use aria-describedby pointing to a text element, or provide a data table alternative.

Image buttons have descriptive alt text

<input type="image" alt="Submit search form">

CAPTCHAs have text and audio alternatives

Visual CAPTCHAs must offer an audio alternative for blind users.

1.2 Time-Based Media

Pre-recorded video has synchronized captions HIGH IMPACT

Captions must be accurate, synchronized, and include speaker identification for multiple speakers.

Pre-recorded audio has a transcript

Podcasts, audio announcements, and audio-only content need a full text transcript.

Pre-recorded video has audio description OR a text alternative

Visual information not conveyed in the audio track must be described through audio description or an equivalent text alternative.

Live video/audio has real-time captions

Live streams of public meetings, press conferences, and events need live captioning.

1.3 Adaptable

Page structure uses proper HTML headings HIGH IMPACT

One <h1> per page. Headings must be nested logically (h1 → h2 → h3). Never skip levels. Never use headings purely for visual styling.

Form fields have visible, programmatically associated labels

<label for="email">Email address</label><input id="email">. Placeholder text alone is not a label.

Tables have proper headers and captions

Use <th scope="col"> and <th scope="row">. Data tables need <caption>.

Reading order matches visual order in source code

When CSS is disabled or linearized by a screen reader, content should still make sense.

1.4 Distinguishable

Color contrast: normal text meets 4.5:1 ratio HIGH IMPACT

Body text, link text, button labels. Use a contrast checker — many common color combinations fail (light gray on white, pale blue on white).

Color contrast: large text (18pt / 14pt bold) meets 3:1 ratio

Headings at 18px bold or larger get the relaxed 3:1 requirement.

Information is not conveyed by color alone HIGH IMPACT

Required form fields cannot be indicated only with red text. Links must be distinguishable from surrounding text without relying solely on color (use underlines).

Text can be resized up to 200% without loss of content or functionality

Test by zooming to 200% in your browser. No content should be cut off or overflow unreadably.

Images of text are avoided (or a text alternative is provided)

Do not embed text in images for decorative purposes. Logos are an exception.

Content reflows to single column at 320px viewport width without horizontal scrolling

WCAG 2.1 addition. Critical for mobile users and users with low vision who zoom in.

Non-text contrast: UI components and focus indicators meet 3:1 ratio

WCAG 2.1 addition. Button borders, checkbox borders, input field borders, focus rings must be distinguishable.

2. Operable — Interface Must Be Usable by All

2.1 Keyboard Accessible

All functionality is available via keyboard alone HIGH IMPACT

Tab through every interactive element. Dropdowns, date pickers, sliders, drag-and-drop must all have keyboard equivalents.

No keyboard traps — focus never gets stuck

Modals must trap focus (expected), but also must allow escape via Escape key or a clearly labeled close button.

Skip navigation link is provided

First focusable element on every page should be a "Skip to main content" link.

2.4 Navigable

Every page has a descriptive, unique <title> HIGH IMPACT

Format: "Page Name - Site Name". Screen readers announce page title first on load.

Focus order is logical and follows reading order

Tab key should move through interactive elements in a meaningful sequence.

Focus indicator is visible on all interactive elements HIGH IMPACT

Never suppress the default focus ring without providing a custom one. Test keyboard navigation and verify you always know where focus is.

Link purpose is clear from link text or context

Avoid "click here", "read more", "learn more" as standalone link text. Use descriptive text like "Read the full ADA Title II compliance guide".

Multiple navigation mechanisms exist (nav menu + search + sitemap)

Users must have more than one way to find any given page.

3. Understandable — Content Must Be Comprehensible

Page language is declared in HTML HIGH IMPACT

<html lang="en">. Screen readers use this to select the correct pronunciation engine.

Language changes within a page are marked

If you include content in a different language: <span lang="es">Español</span>

Navigation is consistent across pages

Navigation menus, headers, footers must appear in the same order and location on every page.

Form errors are clearly identified and described HIGH IMPACT

Error messages must identify the field and describe how to fix it. Use aria-describedby to associate errors with fields.

Input purpose is programmatically determinable (autocomplete)

Use HTML5 autocomplete attributes on forms: autocomplete="email", autocomplete="name", etc.

4. Robust — Content Must Work With Assistive Technologies

HTML is valid and well-formed

Run the W3C HTML validator. Malformed HTML causes unpredictable behavior with screen readers.

ARIA roles, states, and properties are used correctly

Custom widgets (tabs, accordions, carousels) must implement proper ARIA. Test with NVDA + Firefox and VoiceOver + Safari.

Status messages are programmatically determinable

Dynamic content updates (form success, search results count, cart updates) must use role="status" or aria-live so screen readers announce changes.