How to use this checklist
WCAG 2.1 has 50 success criteria across three conformance levels. For most commercial and government web projects, Level AA is the target. The Section 508 ICT Refresh (2017) incorporates WCAG 2.0 AA, and WCAG 2.1 AA is a strict superset.
This page only covers Level A and AA criteria that are implementable in front-end code. Each item links to the issue most developers ship in production.
Perceivable
- 1.1.1Non-text ContentLevel A
Provide text alternatives for images, icons, and media. Decorative images get empty alt; meaningful icons get aria-label or visible text.
- 1.3.1Info and RelationshipsLevel A
Use semantic HTML (headings, lists, labels, landmarks). Don't convey structure through styling alone.
- 1.3.4OrientationLevel AA
Don't lock content to portrait or landscape unless essential.
- 1.3.5Identify Input PurposeLevel AA
Use autocomplete attributes on form fields that collect user information.
- 1.4.3Contrast MinimumLevel AA
4.5:1 for body text, 3:1 for large text (18pt+ or 14pt+ bold) and UI components.
- 1.4.10ReflowLevel AA
No horizontal scrolling at 320 CSS pixels wide. Test with responsive layouts.
- 1.4.11Non-text ContrastLevel AA
3:1 minimum for UI components, focus indicators, and graphical objects.
- 1.4.12Text SpacingLevel AA
Content must remain readable when users override line-height, paragraph spacing, letter spacing, and word spacing.
- 1.4.13Content on Hover or FocusLevel AA
Tooltips and popovers must be dismissible, hoverable, and persistent.
Operable
- 2.1.1KeyboardLevel A
Every interactive element must be operable from a keyboard. No mouse-only interactions.
- 2.1.2No Keyboard TrapLevel A
Focus must be able to leave any component using only the keyboard.
- 2.4.3Focus OrderLevel A
Tab order must match visual and logical reading order.
- 2.4.4Link PurposeLevel A
Each link's purpose must be clear from the link text alone or context. No bare "click here".
- 2.4.5Multiple WaysLevel AA
Provide more than one way to find a page (nav, search, sitemap).
- 2.4.6Headings and LabelsLevel AA
Headings and labels describe topic or purpose. No skipped heading levels.
- 2.4.7Focus VisibleLevel AA
Visible focus indicator on every focusable element. Don't remove outline without replacement.
- 2.5.3Label in NameLevel A
The accessible name of a control must contain its visible label text.
Understandable
- 3.1.1Language of PageLevel A
<html> must have a lang attribute. In Next.js, set it in app/layout.tsx.
- 3.1.2Language of PartsLevel AA
Mark inline content in a different language with a lang attribute.
- 3.2.3Consistent NavigationLevel AA
Navigation appears in the same relative order on every page.
- 3.2.4Consistent IdentificationLevel AA
Components with the same functionality have the same label and icon across pages.
- 3.3.1Error IdentificationLevel A
Form errors must be identified in text — not by color alone.
- 3.3.3Error SuggestionLevel AA
When a form error is detected, suggest a correction if known.
- 3.3.4Error PreventionLevel AA
For legal, financial, or data-modifying actions: allow review, confirm, or reverse.
Robust
- 4.1.2Name, Role, ValueLevel A
Every UI control must expose a name, role, and value to assistive technology.
- 4.1.3Status MessagesLevel AA
Toasts, validation messages, and live updates must use aria-live or proper roles.
How fixa11y enforces this checklist
fixa11y treats this checklist as its rule set. Every CLI finding and Web Fixer suggestion is tagged with the WCAG 2.1 criterion ID it satisfies, so audits remain traceable for Section 508 remediation contracts and VPAT submissions.