WCAG 2.2 atlas
Every WCAG 2.2 success criterion, explained for builders.
86 criteria. Four principles. No legal-ese — just what the rule says, what it looks like in code, and the fix when you break it.
Perceivable
29 criteria
- 1.1.1 · Level ALong form
Non-text Content
Every image, icon, chart, form control, and embedded media needs a text alternative that conveys the same purpose — so screen readers, braille displays, and text-only browsers can access it.
- 1.2.1 · Level A
Audio-only and Video-only (Prerecorded)
Prerecorded audio needs a transcript. Prerecorded video-only (no audio) needs either a text description or an equivalent audio track.
- 1.2.2 · Level A
Captions (Prerecorded)
All prerecorded video with audio must ship with synchronised captions covering dialogue and meaningful sound.
- 1.2.3 · Level A
Audio Description or Media Alternative (Prerecorded)
Prerecorded video must provide either an audio description track or a full text alternative that describes visual information.
- 1.2.4 · Level AA
Captions (Live)
Live audio in synchronised media (webinars, streams, live events) needs real-time captions.
- 1.2.5 · Level AA
Audio Description (Prerecorded)
Prerecorded video with audio must provide an audio description track that narrates meaningful visuals.
- 1.2.6 · Level AAA
Sign Language (Prerecorded)
Provide a sign-language interpretation track for all prerecorded audio content in synchronised media.
- 1.2.7 · Level AAA
Extended Audio Description (Prerecorded)
When audio pauses aren't long enough to describe visuals, provide extended audio description that pauses the video to narrate.
- 1.2.8 · Level AAA
Media Alternative (Prerecorded)
Provide a full text alternative for any prerecorded synchronised media and prerecorded video-only media.
- 1.2.9 · Level AAA
Audio-only (Live)
Provide a text alternative equivalent for live audio-only content.
- 1.3.1 · Level ALong form
Info and Relationships
Structure must be conveyed in code, not just visual styling. Use real headings, lists, tables, fieldsets, and ARIA roles so assistive tech can parse relationships.
- 1.3.2 · Level A
Meaningful Sequence
The DOM order must match the reading order a sighted user would follow. Don't rely on CSS positioning to reorder critical content.
- 1.3.3 · Level A
Sensory Characteristics
Instructions must not rely solely on shape, color, location, or sound. 'Click the round green button' fails; 'Click Submit' passes.
- 1.3.4 · Level AA
Orientation
Content must not be restricted to a single display orientation unless essential (e.g. a piano app). Support both portrait and landscape.
- 1.3.5 · Level AA
Identify Input Purpose
Common form fields (name, email, phone, address) must declare their purpose via autocomplete attributes so assistive tech can autofill.
- 1.3.6 · Level AAA
Identify Purpose
Purpose of UI components, icons, and regions should be programmatically determinable so personalised user agents can adapt.
- 1.4.1 · Level A
Use of Color
Colour must not be the only way to convey meaning. Pair red error states with icons or text. Pair link colour with underlines.
- 1.4.2 · Level A
Audio Control
Audio that plays automatically for more than 3 seconds must have a pause, stop, or volume control independent of the system volume.
- 1.4.3 · Level AALong form
Contrast (Minimum)
Text must have a contrast ratio of at least 4.5:1 against its background. Large text (≥18pt or 14pt bold) may go as low as 3:1.
- 1.4.4 · Level AA
Resize Text
Users must be able to resize text up to 200% without loss of content or functionality.
- 1.4.5 · Level AA
Images of Text
Use real text instead of images of text, except for logotypes and cases where a specific presentation is essential.
- 1.4.6 · Level AAA
Contrast (Enhanced)
Text must have a contrast ratio of at least 7:1, or 4.5:1 for large text. This is the AAA bar above 1.4.3.
- 1.4.7 · Level AAA
Low or No Background Audio
Prerecorded speech must have no background audio, or background that is at least 20dB lower than the speech.
- 1.4.8 · Level AAA
Visual Presentation
For blocks of text, users must be able to control colour, set line width ≤80 characters, avoid justification, and set line spacing ≥1.5.
- 1.4.9 · Level AAA
Images of Text (No Exception)
Images of text must only be used for pure decoration or when a particular presentation of text is essential. No logotype exception at AAA.
- 1.4.10 · Level AA
Reflow
Content must reflow at 320 CSS pixels wide (equivalent to 400% zoom at 1280px) without horizontal scrolling, except for data tables and maps.
- 1.4.11 · Level AA
Non-text Contrast
UI component boundaries and meaningful graphics must have at least 3:1 contrast against adjacent colours.
- 1.4.12 · Level AA
Text Spacing
Text must remain readable when users override line-height (1.5×), paragraph spacing (2×), letter spacing (0.12×), and word spacing (0.16×).
- 1.4.13 · Level AA
Content on Hover or Focus
Tooltips and popovers triggered by hover or focus must be dismissable, hoverable (not disappear when you move to them), and persistent.
Operable
34 criteria
- 2.1.1 · Level ALong form
Keyboard
All functionality must be operable through a keyboard interface, without requiring specific timings for individual keystrokes.
- 2.1.2 · Level A
No Keyboard Trap
Keyboard focus must be able to move away from any component. Modals that swallow Tab/Escape fail this criterion.
- 2.1.3 · Level AAA
Keyboard (No Exception)
All functionality must be operable via keyboard — no exceptions for path-dependent input like freehand drawing.
- 2.1.4 · Level A
Character Key Shortcuts
Single-character keyboard shortcuts (letter, punctuation, digit) must be remappable, turn-off-able, or only active on focus.
- 2.2.1 · Level A
Timing Adjustable
Users must be able to turn off, adjust, or extend any time limit, with few exceptions (real-time events, essential timing).
- 2.2.2 · Level A
Pause, Stop, Hide
Auto-updating, moving, or blinking content that lasts more than 5 seconds must have user controls to pause, stop, or hide it.
- 2.2.3 · Level AAA
No Timing
Timing must not be an essential part of any event or activity, except for non-interactive synchronised media and real-time events.
- 2.2.4 · Level AAA
Interruptions
Interruptions can be postponed or suppressed by the user, except emergencies.
- 2.2.5 · Level AAA
Re-authenticating
When a session expires, users must be able to continue where they left off after re-authenticating, without data loss.
- 2.2.6 · Level AAA
Timeouts
Users must be warned about session timeouts that could cause data loss, unless data is preserved for 20+ hours of inactivity.
- 2.3.1 · Level A
Three Flashes or Below Threshold
Content must not flash more than three times per second, or must stay below the general flash and red flash thresholds.
- 2.3.2 · Level AAA
Three Flashes
Content must not flash more than three times per second, period. Stricter than 2.3.1 with no threshold escape hatch.
- 2.3.3 · Level AAA
Animation from Interactions
Motion animation triggered by interaction can be disabled, unless the animation is essential to functionality.
- 2.4.1 · Level A
Bypass Blocks
Provide a mechanism to skip repeated blocks of content — a 'skip to main content' link, landmark regions, or proper heading structure.
- 2.4.2 · Level A
Page Titled
Every page must have a <title> that describes its topic or purpose — unique per route, front-loaded with the important part.
- 2.4.3 · Level A
Focus Order
Focus order must preserve meaning and operability. Don't use positive tabindex; let the DOM order drive focus flow.
- 2.4.4 · Level ALong form
Link Purpose (In Context)
The purpose of each link can be determined from the link text alone, or from the link text together with its programmatically determined context.
- 2.4.5 · Level AA
Multiple Ways
Provide more than one way to locate a page within a set of pages — site search, sitemap, navigation, breadcrumbs, related links.
- 2.4.6 · Level AA
Headings and Labels
Headings and labels must describe topic or purpose. 'Click here' labels and vague 'Section 2' headings fail.
- 2.4.7 · Level AALong form
Focus Visible
Every keyboard-operable component must have a visible focus indicator. Removing the outline with CSS and providing no replacement fails.
- 2.4.8 · Level AAA
Location
Information about the user's location within a set of pages is available — breadcrumbs, current-page indicators, site maps.
- 2.4.9 · Level AAA
Link Purpose (Link Only)
Link purpose must be determinable from the link text alone, even without surrounding context.
- 2.4.10 · Level AAA
Section Headings
Section headings are used to organise content, not just styled paragraphs. Every major section gets a real heading.
- 2.4.11 · Level AA
Focus Not Obscured (Minimum)
When a component has keyboard focus, the focus indicator must not be entirely hidden by author-created content like sticky headers or cookie banners.
- 2.4.12 · Level AAA
Focus Not Obscured (Enhanced)
When a component has keyboard focus, no part of the focus indicator may be hidden by author-created content.
- 2.4.13 · Level AAA
Focus Appearance
Focus indicators must have at least a 2-CSS-pixel-thick perimeter and 3:1 contrast against the unfocused state. Stricter than 2.4.7.
- 2.5.1 · Level A
Pointer Gestures
Any functionality that uses multipoint or path-based gestures must also work with a single pointer, unless the gesture is essential.
- 2.5.2 · Level A
Pointer Cancellation
Single-pointer actions must not execute on pointerdown; use pointerup so users can abort by dragging away.
- 2.5.3 · Level A
Label in Name
For UI components with visible text labels, the accessible name must include that visible text so voice control works.
- 2.5.4 · Level A
Motion Actuation
Functionality triggered by device motion (shake to undo) must also have a standard UI control and be disableable.
- 2.5.5 · Level AAA
Target Size (Enhanced)
Touch targets must be at least 44×44 CSS pixels, with few exceptions.
- 2.5.6 · Level AAA
Concurrent Input Mechanisms
Web content must not restrict the use of input modalities — keyboard, mouse, touch, voice — unless essential.
- 2.5.7 · Level AA
Dragging Movements
Any functionality that uses a dragging movement must also be operable by a single-pointer non-dragging action, unless dragging is essential.
- 2.5.8 · Level AA
Target Size (Minimum)
Pointer targets must be at least 24×24 CSS pixels, unless equivalent controls exist, the target is inline, or size is essential.
Understandable
21 criteria
- 3.1.1 · Level ALong form
Language of Page
Set the default human language of the page programmatically with <html lang>. Screen readers switch pronunciation engines on this.
- 3.1.2 · Level AA
Language of Parts
Passages or phrases in a different language from the page default must be marked with a lang attribute.
- 3.1.3 · Level AAA
Unusual Words
A mechanism is available for identifying specific definitions of words or phrases used in an unusual way, including idioms and jargon.
- 3.1.4 · Level AAA
Abbreviations
A mechanism for identifying the expanded form or meaning of abbreviations is available.
- 3.1.5 · Level AAA
Reading Level
When text requires reading ability more advanced than lower-secondary school, supplemental content or a simpler version is available.
- 3.1.6 · Level AAA
Pronunciation
A mechanism is available for identifying specific pronunciation of words where meaning is ambiguous without it.
- 3.2.1 · Level A
On Focus
Receiving focus must not trigger a change of context — no auto-submit, no navigation, no popup opens just because you tabbed to a field.
- 3.2.2 · Level A
On Input
Changing a form control's setting must not trigger a context change unless the user has been advised before using it.
- 3.2.3 · Level AA
Consistent Navigation
Navigational mechanisms that repeat across pages occur in the same relative order each time.
- 3.2.4 · Level AA
Consistent Identification
Components with the same functionality must be identified consistently — same icon, same label, same accessible name across the site.
- 3.2.5 · Level AAA
Change on Request
Changes of context are initiated only by user request, or a mechanism is available to turn off such changes.
- 3.2.6 · Level A
Consistent Help
If a web page contains help mechanisms (contact info, chat, FAQ, self-help), they must appear in the same relative order across pages.
- 3.3.1 · Level ALong form
Error Identification
Input errors must be identified in text — not just a red border. Describe what field failed and why.
- 3.3.2 · Level A
Labels or Instructions
Every form control with user input must have a visible label or instruction. Placeholder-only is not a label.
- 3.3.3 · Level AA
Error Suggestion
If an input error is detected and suggestions for correction are known, provide them to the user — unless it jeopardises security.
- 3.3.4 · Level AA
Error Prevention (Legal, Financial, Data)
For legal, financial, or data-altering submissions, provide reversal, checked review, or confirmation before commit.
- 3.3.5 · Level AAA
Help
Context-sensitive help is available for user input.
- 3.3.6 · Level AAA
Error Prevention (All)
For any submission, the user can reverse, confirm, or review before commit. 3.3.4 applied to all forms, not just high-stakes ones.
- 3.3.7 · Level A
Redundant Entry
Information previously entered in the same process must be auto-filled or selectable, unless re-entry is essential (security, expired data).
- 3.3.8 · Level AA
Accessible Authentication (Minimum)
Authentication must not rely on cognitive function tests (memorising passwords, solving puzzles) unless an alternative or mechanism exists.
- 3.3.9 · Level AAA
Accessible Authentication (Enhanced)
Authentication must not rely on cognitive function tests even for identifying objects or personal content.
Robust
2 criteria
- 4.1.2 · Level ALong form
Name, Role, Value
For all UI components, the name and role must be programmatically determinable; states, properties, and values can be set programmatically.
- 4.1.3 · Level AALong form
Status Messages
Status messages can be programmatically determined through role or properties so they're announced by assistive tech without receiving focus.