WCAG 2.1 Level AA is the technical standard the U.S. Department of Justice and federal courts apply to ADA web accessibility. Published by the W3C in June 2018, it contains 50 success criteria — 30 at Level A and 20 at Level AA — organized under four principles: Perceivable, Operable, Understandable, and Robust. WCAG 2.1 AA is codified for ADA Title II by 28 C.F.R. § 35.200.
Below we summarize the 28 criteria most often cited in remediation work and demand letters. The complete canonical list of all 50 is at w3.org WAI Quick Reference.
All non-text content (images, icons, charts) must have a text alternative that serves the equivalent purpose.
How to test: Inspect every image, icon, and decorative element. Verify each has appropriate alt text or is marked as decorative with alt="" or role="presentation".
How to fix: Add descriptive alt attributes to meaningful images. Use alt="" for purely decorative images. Provide text alternatives for complex graphics like charts.
Prerecorded audio-only content needs a transcript. Prerecorded video-only content needs either a transcript or audio description.
How to test: Find all audio-only and video-only content. Confirm transcripts or audio descriptions are available and linked prominently.
How to fix: Create accurate transcripts for audio content. For video-only, provide a text description of the visual content or an audio track narrating the visuals.
All prerecorded audio content in synchronized media must have captions.
How to test: Play every video with audio and verify captions are present, synchronized, and accurately represent the spoken content.
How to fix: Add synchronized captions to all prerecorded videos. Use WebVTT or SRT caption files. Ensure captions include speaker identification and relevant sound effects.
Information, structure, and relationships conveyed through visual presentation must be programmatically determined or available in text.
How to test: Check that headings use proper heading tags (h1-h6), lists use list markup, tables have proper headers, and form fields have associated labels.
How to fix: Use semantic HTML elements. Associate labels with form controls. Use table headers (th) with scope attributes. Mark up lists with ul/ol/li.
Content must not restrict its view and operation to a single display orientation (portrait or landscape) unless essential.
How to test: Rotate your device or use responsive design mode. Verify content adapts and remains functional in both portrait and landscape.
How to fix: Avoid CSS that locks orientation. Use responsive layouts that work in both orientations. Only lock orientation if essential (e.g., a piano app).
The purpose of form fields collecting user information can be programmatically determined using autocomplete attributes.
How to test: Check form fields for personal data (name, email, address) and verify they have appropriate autocomplete attribute values.
How to fix: Add autocomplete attributes to form fields: autocomplete="name", autocomplete="email", autocomplete="street-address", etc.
Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
How to test: View the page in grayscale. Check if any information is lost. Verify links are distinguishable from surrounding text by more than color alone.
How to fix: Add additional visual cues like underlines, icons, patterns, or text labels alongside color. Ensure form error messages use text, not just red highlighting.
Text and images of text must have a contrast ratio of at least 4.5:1 (3:1 for large text).
How to test: Use a color contrast checker to measure the ratio between text color and background color for all text on the page.
How to fix: Darken text or lighten backgrounds until the 4.5:1 ratio is achieved. For large text (18pt or 14pt bold), a 3:1 ratio is sufficient.
UI components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.
How to test: Check button borders, form field borders, icons, and chart elements against their backgrounds with a contrast tool.
How to fix: Ensure borders, focus indicators, and meaningful graphical elements meet 3:1 contrast ratio against their backgrounds.
All functionality must be operable through a keyboard interface without requiring specific timings for individual keystrokes.
How to test: Navigate the entire page using only the Tab, Enter, Space, Escape, and Arrow keys. Verify all interactive elements are reachable and operable.
How to fix: Use native interactive HTML elements (button, a, input). Add tabindex="0" and keyboard event handlers to custom interactive elements.
If keyboard focus can be moved to a component, focus can also be moved away from it using only the keyboard.
How to test: Tab through every interactive element on the page. Ensure you can always tab away from any component, especially modals and embedded content.
How to fix: Ensure modals have a close mechanism that works with keyboard. Manage focus trapping so Escape or Tab can always return focus to the main page.
A mechanism must be available to bypass blocks of content that are repeated on multiple pages (like navigation).
How to test: Tab from the very top of the page and verify a "Skip to main content" link appears. Check that it moves focus past the navigation.
How to fix: Add a skip navigation link as the first focusable element. Use ARIA landmarks (main, nav, banner) to allow screen reader users to jump between sections.
Web pages must have titles that describe their topic or purpose.
How to test: Check the browser tab or inspect the <title> element. Verify it describes the page content and is unique across the site.
How to fix: Set a descriptive, unique title for each page. Follow a pattern like "Page Name | Site Name".
If a page can be navigated sequentially and the navigation order affects meaning or operation, focusable components receive focus in a meaningful order.
How to test: Tab through the page and verify the focus order follows the visual reading order and logical flow of the content.
How to fix: Ensure DOM order matches visual order. Avoid positive tabindex values. Use CSS for visual reordering rather than rearranging DOM elements.
Headings and labels must describe the topic or purpose of the content they introduce.
How to test: Read each heading and label in isolation. Verify they clearly describe what follows without needing surrounding context.
How to fix: Write descriptive headings that summarize section content. Ensure form labels clearly describe what input is expected.
Any keyboard-operable user interface must have a visible focus indicator.
How to test: Tab through every interactive element and verify a visible outline or highlight appears on each focused element.
How to fix: Do not remove outline styles with outline: none unless replacing with an equally visible alternative. Use :focus-visible for modern focus styling.
For UI components with visible text labels, the accessible name must contain the visible text.
How to test: Compare the visible label text with the accessible name (aria-label or aria-labelledby). Ensure the accessible name includes the visible text.
How to fix: Ensure aria-label values contain the visible button/link text. Prefer using the visible text as the accessible name rather than overriding it.
Functionality triggered by device motion (shaking, tilting) must also be operable through a conventional user interface, and motion can be disabled.
How to test: Identify any features triggered by device motion. Verify an alternative button or control exists and that motion activation can be disabled.
How to fix: Provide conventional UI controls (buttons) as alternatives to motion gestures. Add a setting to disable motion-triggered features.
The default human language of each web page must be programmatically determined.
How to test: Check that the <html> element has a lang attribute with a valid language code (e.g., lang="en").
How to fix: Add the lang attribute to the html element: <html lang="en">. Use the correct ISO 639-1 language code.
When a UI component receives focus, it must not initiate a change of context (like navigating to another page or significantly altering the page).
How to test: Tab to every interactive element and verify that merely focusing on an element does not trigger unexpected navigation, form submission, or popup.
How to fix: Move context-changing actions to explicit user actions (click, Enter). Do not auto-submit forms or redirect on focus.
If an input error is automatically detected, the item in error must be identified and the error described to the user in text.
How to test: Submit forms with invalid data and verify error messages appear in text, identify the field, and describe the error.
How to fix: Display descriptive error messages near the relevant field. Use aria-describedby to associate error text with the input. Set aria-invalid="true" on invalid fields.
Labels or instructions are provided when content requires user input.
How to test: Check every form field has a visible label. Verify required fields are indicated. Confirm format expectations (e.g., date format) are communicated.
How to fix: Add visible <label> elements associated with each input. Include format hints and required field indicators. Use aria-required="true" for required fields.
In content implemented using markup languages, elements have complete start and end tags, are nested properly, and do not contain duplicate attributes.
How to test: Run the page through the W3C HTML validator. Check for duplicate IDs, unclosed tags, and improper nesting.
How to fix: Fix any HTML validation errors. Ensure unique ID values, properly nested elements, and complete open/close tags.
For all UI components, the name and role can be programmatically determined. States, properties, and values can be programmatically set.
How to test: Use a screen reader to navigate interactive elements. Verify each announces its name, role (button, link, checkbox), and current state.
How to fix: Use native HTML elements where possible. For custom widgets, add appropriate ARIA roles, labels (aria-label or aria-labelledby), and state attributes.
Up next: the 50-item plain-English checklist or industry-specific exposure.