WCAG 2.2 Success Criteria
In-depth guides to all 86 success criteria with examples and implementation code
86
31
24
31
About These Guides
Each success criterion guide provides comprehensive coverage including detailed explanations, interactive examples, testing methods, implementation code, and additional resources. The library covers every Level A, AA, and AAA criterion across all four WCAG principles, including the requirements introduced in WCAG 2.2.
Interactive Examples
See good and bad implementations
Testing Methods
Manual and automated testing approaches
Implementation Code
HTML, CSS, React examples
1. Perceivable
1.1.1 Non-text Content
All non-text content has appropriate text alternatives that serve the equivalent purpose.
1.2.1 Audio-only and Video-only (Prerecorded)
Provide alternatives for prerecorded audio-only and video-only content.
1.2.2 Captions (Prerecorded)
Captions are provided for all prerecorded audio content in synchronized media.
1.2.3 Audio Description or Media Alternative (Prerecorded)
Audio description or full text alternative is provided for prerecorded video content.
1.2.4 Captions (Live)
Captions are provided for all live audio content in synchronized media.
1.2.5 Audio Description (Prerecorded)
Audio description is provided for all prerecorded video content.
1.2.6 Sign Language (Prerecorded)
Sign language interpretation is provided for all prerecorded audio content.
1.2.7 Extended Audio Description (Prerecorded)
Extended audio description is provided when regular audio description is insufficient.
1.2.8 Media Alternative (Prerecorded)
A text alternative is provided for all prerecorded synchronized media.
1.2.9 Audio-only (Live)
A text alternative is provided for live audio-only content.
1.3.1 Info and Relationships
Information, structure, and relationships can be programmatically determined.
1.3.2 Meaningful Sequence
Content can be presented in a meaningful sequence without losing meaning.
1.3.3 Sensory Characteristics
Instructions don't rely solely on sensory characteristics of components.
1.3.4 Orientation
Content does not restrict its view to a single display orientation.
1.3.5 Identify Input Purpose
The purpose of input fields can be programmatically determined.
1.3.6 Identify Purpose
The purpose of User Interface Components can be programmatically determined.
1.4.1 Use of Color
Color is not used as the only visual means of conveying information.
1.4.2 Audio Control
Audio that plays automatically can be paused, stopped, or controlled.
1.4.3 Contrast (Minimum)
Text has a contrast ratio of at least 4.5:1 (3:1 for large text).
1.4.4 Resize Text
Text can be resized up to 200% without loss of content or functionality.
1.4.5 Images of Text
Text is used instead of images of text, except for customizable or essential images.
1.4.6 Contrast (Enhanced)
Text has a contrast ratio of at least 7:1 (4.5:1 for large text).
1.4.7 Low or No Background Audio
Audio content has no background sounds or they can be turned off.
1.4.8 Visual Presentation
Text content presentation can be adjusted by the user.
1.4.9 Images of Text (No Exception)
Images of text are only used for decoration or where essential.
1.4.10 Reflow
Content can be presented without horizontal scrolling at 320 CSS pixels width.
1.4.11 Non-text Contrast
UI components and graphical objects have sufficient contrast (3:1 minimum).
1.4.12 Text Spacing
No loss of content when text spacing is adjusted within certain parameters.
1.4.13 Content on Hover or Focus
Additional content triggered by hover or focus can be dismissed and doesn't interfere.
2. Operable
2.1.1 Keyboard
All functionality is available from a keyboard interface.
2.1.2 No Keyboard Trap
Focus can be moved away from any component using standard keyboard methods.
2.1.3 Keyboard (No Exception)
All functionality is available from a keyboard interface without exception.
2.1.4 Character Key Shortcuts
Single character key shortcuts can be turned off or remapped.
2.2.1 Timing Adjustable
Users can turn off, adjust, or extend time limits.
2.2.2 Pause, Stop, Hide
Moving, blinking, or auto-updating content can be paused, stopped, or hidden.
2.2.3 No Timing
Timing is not an essential part of the event or activity.
2.2.4 Interruptions
Interruptions can be postponed or suppressed by the user.
2.2.5 Re-authenticating
User data is preserved when a session expires and re-authentication is required.
2.2.6 Timeouts
Users are warned of the duration of inactivity that could cause data loss.
2.3.1 Three Flashes or Below Threshold
Content does not contain anything that flashes more than three times per second.
2.3.2 Three Flashes
Web pages do not contain anything that flashes more than three times per second.
2.3.3 Animation from Interactions
Motion animation triggered by interaction can be disabled.
2.4.1 Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated.
2.4.2 Page Titled
Web pages have titles that describe topic or purpose.
2.4.3 Focus Order
Focusable components receive focus in an order that preserves meaning.
2.4.4 Link Purpose (In Context)
The purpose of each link can be determined from link text or context.
2.4.5 Multiple Ways
More than one way is available to locate a page within a set of pages.
2.4.6 Headings and Labels
Headings and labels describe topic or purpose.
2.4.7 Focus Visible
Any keyboard operable interface has a visible focus indicator.
2.4.8 Location
Information about the user's location within a set of pages is available.
2.4.9 Link Purpose (Link Only)
The purpose of each link can be identified from the link text alone.
2.4.10 Section Headings
Section headings are used to organize the content.
2.4.11 Focus Not Obscured (Minimum)
When a component receives keyboard focus, it is not entirely hidden.
2.4.12 Focus Not Obscured (Enhanced)
When a component receives keyboard focus, no part of it is hidden.
2.4.13 Focus Appearance
The focus indicator has sufficient size and contrast.
2.5.1 Pointer Gestures
Functionality that uses multipoint or path-based gestures has alternatives.
2.5.2 Pointer Cancellation
Functions triggered by single pointer can be cancelled or undone.
2.5.3 Label in Name
The accessible name contains the visible label text.
2.5.4 Motion Actuation
Functionality triggered by device motion can be disabled and has alternatives.
2.5.5 Target Size (Enhanced)
Target size is at least 44 by 44 CSS pixels except in specific cases.
2.5.6 Concurrent Input Mechanisms
Content does not restrict use of input modalities.
2.5.7 Dragging Movements
Functionality that uses dragging has a single pointer alternative.
2.5.8 Target Size (Minimum)
Target size is at least 24 by 24 CSS pixels except in specific cases.
3. Understandable
3.1.1 Language of Page
The default human language of each page can be programmatically determined.
3.1.2 Language of Parts
The human language of each passage can be programmatically determined.
3.1.3 Unusual Words
A mechanism is available for identifying specific definitions of words.
3.1.4 Abbreviations
A mechanism for identifying the expanded form of abbreviations is available.
3.1.5 Reading Level
Text requires reading ability no higher than lower secondary education level.
3.1.6 Pronunciation
A mechanism is available for identifying pronunciation of words.
3.2.1 On Focus
When a component receives focus, it does not initiate a change of context.
3.2.2 On Input
Changing settings of a component does not automatically cause context changes.
3.2.3 Consistent Navigation
Navigational mechanisms are repeated in the same relative order.
3.2.4 Consistent Identification
Components with the same functionality are identified consistently.
3.2.5 Change on Request
Changes of context are initiated only by user request.
3.2.6 Consistent Help
Help mechanisms appear in the same relative order across pages.
3.3.1 Error Identification
Input errors are automatically detected and described to the user.
3.3.2 Labels or Instructions
Labels or instructions are provided when content requires user input.
3.3.3 Error Suggestion
Input error suggestions are provided when errors are detected.
3.3.4 Error Prevention (Legal, Financial, Data)
Important transactions can be reversed, checked, or confirmed.
3.3.5 Help
Context-sensitive help is available.
3.3.6 Error Prevention (All)
All user input can be checked and confirmed before submission.
3.3.7 Redundant Entry
Information previously entered is either auto-populated or selectable.
3.3.8 Accessible Authentication (Minimum)
Authentication methods don't rely solely on cognitive function tests.
3.3.9 Accessible Authentication (Enhanced)
Authentication methods don't rely on cognitive function tests.
4. Robust
4.1.2 Name, Role, Value
Name, role, and value can be programmatically determined for UI components.
4.1.3 Status Messages
Status messages can be programmatically determined through role or properties.
Put the Guidelines into Practice
Work through every criterion with the interactive checklist, or test your site right now with our free accessibility tools.