Loading...
In-depth guides to all 86 success criteria with examples and implementation code
86
31
24
31
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
All non-text content has appropriate text alternatives that serve the equivalent purpose.
Provide alternatives for prerecorded audio-only and video-only content.
Captions are provided for all prerecorded audio content in synchronized media.
Audio description or full text alternative is provided for prerecorded video content.
Captions are provided for all live audio content in synchronized media.
Audio description is provided for all prerecorded video content.
Sign language interpretation is provided for all prerecorded audio content.
Extended audio description is provided when regular audio description is insufficient.
A text alternative is provided for all prerecorded synchronized media.
A text alternative is provided for live audio-only content.
Information, structure, and relationships can be programmatically determined.
Content can be presented in a meaningful sequence without losing meaning.
Instructions don't rely solely on sensory characteristics of components.
Content does not restrict its view to a single display orientation.
The purpose of input fields can be programmatically determined.
The purpose of User Interface Components can be programmatically determined.
Color is not used as the only visual means of conveying information.
Audio that plays automatically can be paused, stopped, or controlled.
Text has a contrast ratio of at least 4.5:1 (3:1 for large text).
Text can be resized up to 200% without loss of content or functionality.
Text is used instead of images of text, except for customizable or essential images.
Text has a contrast ratio of at least 7:1 (4.5:1 for large text).
Audio content has no background sounds or they can be turned off.
Text content presentation can be adjusted by the user.
Images of text are only used for decoration or where essential.
Content can be presented without horizontal scrolling at 320 CSS pixels width.
UI components and graphical objects have sufficient contrast (3:1 minimum).
No loss of content when text spacing is adjusted within certain parameters.
Additional content triggered by hover or focus can be dismissed and doesn't interfere.
All functionality is available from a keyboard interface.
Focus can be moved away from any component using standard keyboard methods.
All functionality is available from a keyboard interface without exception.
Single character key shortcuts can be turned off or remapped.
Users can turn off, adjust, or extend time limits.
Moving, blinking, or auto-updating content can be paused, stopped, or hidden.
Timing is not an essential part of the event or activity.
Interruptions can be postponed or suppressed by the user.
User data is preserved when a session expires and re-authentication is required.
Users are warned of the duration of inactivity that could cause data loss.
Content does not contain anything that flashes more than three times per second.
Web pages do not contain anything that flashes more than three times per second.
Motion animation triggered by interaction can be disabled.
A mechanism is available to bypass blocks of content that are repeated.
Web pages have titles that describe topic or purpose.
Focusable components receive focus in an order that preserves meaning.
The purpose of each link can be determined from link text or context.
More than one way is available to locate a page within a set of pages.
Headings and labels describe topic or purpose.
Any keyboard operable interface has a visible focus indicator.
Information about the user's location within a set of pages is available.
The purpose of each link can be identified from the link text alone.
Section headings are used to organize the content.
When a component receives keyboard focus, it is not entirely hidden.
When a component receives keyboard focus, no part of it is hidden.
The focus indicator has sufficient size and contrast.
Functionality that uses multipoint or path-based gestures has alternatives.
Functions triggered by single pointer can be cancelled or undone.
The accessible name contains the visible label text.
Functionality triggered by device motion can be disabled and has alternatives.
Target size is at least 44 by 44 CSS pixels except in specific cases.
Content does not restrict use of input modalities.
Functionality that uses dragging has a single pointer alternative.
Target size is at least 24 by 24 CSS pixels except in specific cases.
The default human language of each page can be programmatically determined.
The human language of each passage can be programmatically determined.
A mechanism is available for identifying specific definitions of words.
A mechanism for identifying the expanded form of abbreviations is available.
Text requires reading ability no higher than lower secondary education level.
A mechanism is available for identifying pronunciation of words.
When a component receives focus, it does not initiate a change of context.
Changing settings of a component does not automatically cause context changes.
Navigational mechanisms are repeated in the same relative order.
Components with the same functionality are identified consistently.
Changes of context are initiated only by user request.
Help mechanisms appear in the same relative order across pages.
Input errors are automatically detected and described to the user.
Labels or instructions are provided when content requires user input.
Input error suggestions are provided when errors are detected.
Important transactions can be reversed, checked, or confirmed.
Context-sensitive help is available.
All user input can be checked and confirmed before submission.
Information previously entered is either auto-populated or selectable.
Authentication methods don't rely solely on cognitive function tests.
Authentication methods don't rely on cognitive function tests.
Name, role, and value can be programmatically determined for UI components.
Status messages can be programmatically determined through role or properties.
Work through every criterion with the interactive checklist, or test your site right now with our free accessibility tools.