| 1.1.1 |
Level A |
Text Alternatives |
1.1.1-non-text-content |
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content. Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology. |
F3: Failure due to using CSS to include images that convey important information. ; F13: Failure due to having a text alternative that does not include information that is conveyed by color differences in the image. ; F20: Failure due to not updating text alternatives when changes to non-text content occur. ; F30: Failure due to using text alternatives that are not alternatives (e.g., filenames or placeholder text). ; F38: Failure due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them. ; F39: Failure due to providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology. ; F65: Failure due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type “image”. ; F67: Failure due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information. ; F71: Failure due to using text look-alikes to represent text without providing a text alternative. ; F72: Failure due to using ASCII art without providing a text alternative. |
G94 Provide descriptive alt text for informative images, H67 use alt=”” for decorative images, H44 use explicit form labels, G143 provide text alternatives for CAPTCHA. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html |
WCAG 2.2 |
Images, UI Components, Media |
Alternate Text, Decorative Images, CAPTCHA, Form Controls, Graphic Symbols, Structural Markup |
| 1.2.1 |
Level A |
Time-based Media |
1.2.1-Audio-only and Video-only (Prerecorded) |
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such. Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content. Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content. |
F30: Failure due to using text alternatives that are not alternatives (e.g., filenames or placeholder text). ; F67: Failure due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information. |
G158 Provide a full text transcript for prerecorded audio-only media; G159, G166 provide a text transcript or an audio track with a description for prerecorded video-only media. |
Screen Reader Users, Deaf / Hard of Hearing |
https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html |
WCAG 2.2 |
Multimedia |
Audio-only, Video-only, Transcripts, Prerecorded Media, Media Alternatives |
| 1.2.2 |
Level A |
Time-based Media |
1.2.2-Captions (Prerecorded) |
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. |
F8: Failure due to captions omitting some dialogue or important sound effects. ; F74: Failure due to not labeling a synchronized media alternative to text as an alternative. ; F75: Failure by providing synchronized media without captions when the synchronized media presents more information than is presented on the page. |
G93, H95 Provide synchronized captions for all prerecorded audio in multimedia content using standard formats like WebVTT. |
Deaf / Hard of Hearing, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html |
WCAG 2.2 |
Multimedia |
Captions, Synchronized Media, Prerecorded Media, Audio Tracks |
| 1.2.3 |
Level A |
Time-based Media |
1.2.3-Audio Description or Media Alternative (Prerecorded) |
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. |
F74: Failure due to not labeling a synchronized media alternative to text as an alternative. ; F113: Failure due to not using available pauses in dialogue to provide audio descriptions of important visual content. ; Failure: A text transcript is provided, but it only contains a verbatim dialogue track and completely omits descriptions of critical visual information. ; Failure: A valid text alternative or secondary video file exists, but it is not programmatically or textually linked immediately adjacent to the media player. |
G69, G58 Provide a descriptive text transcript that captures both dialogue and visual action, or provide a secondary audio track with spoken descriptions of visual elements. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html |
WCAG 2.2 |
Multimedia |
Audio Description, Media Alternatives, Transcripts, Synchronized Media |
| 1.2.4 |
Level AA |
Time-based Media |
1.2.4-Captions (Live) |
Captions are provided for all live audio content in synchronized media. |
Failure: Complete absence of live captions when broadcasting a live synchronized media event. ; Failure: Lack of synchronization where caption text lags excessively behind the live video stream. ; Failure: Omitting critical non-speech sounds, speaker identification, and crucial sound effects from the live track. ; Failure: Inaccuracy that destroys meaning due to severe typos or missing words from automated real-time text generation. |
G9, G87 Use real-time captioning services (CART), ensure manual live captioning workflows are synchronized, and include critical non-speech sound cues. |
Deaf / Hard of Hearing, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html |
WCAG 2.2 |
Multimedia |
Live Captions, Real-time Media, Synchronization, Live Broadcasts |
| 1.2.5 |
Level AA |
Time-based Media |
1.2.5-Audio Description (Prerecorded) |
Audio description is provided for all prerecorded video content in synchronized media. |
Failure: Complete absence of an audio description track or alternative descriptive media version. ; Failure: Failure to describe critical visual actions, body language, facial expressions, or setting changes. ; Failure: Omitting important text displayed visually on screen that is never spoken out loud. ; Failure: Placing descriptions directly over important dialogue, obscuring the core audio elements. |
G173, H96 Embed a dedicated descriptive audio narration track using native player features or secondary media files to explain visual context, action, and on-screen text. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html |
WCAG 2.2 |
Multimedia |
Audio Description, Prerecorded Media, Video Descriptions, Text Overlays |
| 1.2.6 |
Level AAA |
Time-based Media |
1.2.6-Sign Language (Prerecorded) |
Sign language interpretation is provided for all prerecorded audio content in synchronized media. |
Failure: Complete absence of a sign language interpretation track or embedded video. ; Failure: Interpreter video frame is too small, blurry, or blocked by layout elements, preventing readability. ; Failure: Lack of synchronization between the sign language interpretation and the spoken audio. ; Failure: Using an incorrect or unstandardized sign language variant that does not match the primary target region. |
G54 Embed a synchronized, clearly visible sign language interpreter window within the video player or provide a dedicated alternative video stream with interpretation. |
Deaf Users (Primary Sign Language) |
https://www.w3.org/WAI/WCAG22/Understanding/sign-language-prerecorded.html |
WCAG 2.2 |
Multimedia |
Sign Language, Interpretation, Prerecorded Media, Synchronized Media |
| 1.2.7 |
Level AAA |
Time-based Media |
1.2.7-Extended Audio Description (Prerecorded) |
Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media. |
F24: Failure due to the audio description not being selectable, or the availability of the alternate version not being easily discoverable. ; Failure: Complete absence of extended audio description when natural dialogue pauses are too short to fit essential descriptions. ; Failure: Overwriting or obscuring primary dialogue or critical sound effects instead of pausing the core video timeline. |
G8 Use an audio player that programmatically pauses the main video automatically when extended verbal descriptions are required to explain complex visual scenes. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/extended-audio-description-prerecorded.html |
WCAG 2.2 |
Multimedia |
Extended Audio Description, Video Pauses, Media Alternatives, Prerecorded Media |
| 1.2.8 |
Level AAA |
Time-based Media |
1.2.8-Media Alternative (Prerecorded) |
An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media. |
Failure: Complete absence of an alternative text transcript, storyboard, or descriptive narrative narrative. ; Failure: Omitting critical visual context, settings, or visual plot points from the provided transcript. ; Failure: Inaccurate chronological sequencing of descriptions or dialogue within the text alternative. |
G159 Supply a comprehensive, descriptive multi-media alternative document (such as a full script or an interactive text transcript including all descriptions of visual actions). |
Screen Reader Users, Deaf / Hard of Hearing |
https://www.w3.org/WAI/WCAG22/Understanding/media-alternative-prerecorded.html |
WCAG 2.2 |
Multimedia |
Media Alternatives, Text Transcripts, Storyboards, Prerecorded Media |
| 1.2.9 |
Level AAA |
Time-based Media |
1.2.9-Audio-only (Live) |
An alternative for time-based media that presents equivalent information for live audio-only content is provided. |
Failure: Complete absence of a continuous, real-time text transcript or live CART service during an audio broadcast. ; Failure: Severe transcription lag that delays the text stream far behind the live audio context. ; Failure: Garbled or incoherent transcription containing extensive typos that destroy the meaning of the live audio feed. |
G150, G151 Provide a simultaneous, high-accuracy text transcript feed alongside live audio streams, or offer real-time text-based chat/summarizations. |
Deaf / Hard of Hearing, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/audio-only-live.html |
WCAG 2.2 |
Multimedia |
Live Audio, Real-time Transcripts, CART Services, Audio-only Streams |
| 1.3.1 |
Level A |
Adaptable |
1.3.1-Info and Relationships |
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
F2: Failure due to using structural markup in a way that does not represent relationships in the content. ; F17: Failure due to insufficient information in DOM to determine one-to-one relationships (e.g., between form controls and labels). ; F33: Failure due to using white space characters to create multiple columns in plain text content. ; F34: Failure due to using white space characters to format tables in plain text content. ; F42: Failure due to using scripted handlers to provide link behavior on an element that cannot be programmatically determined to be a link. ; F43: Failure due to using structural markup elements for purely visual formatting. ; F46: Failure due to using th elements, scope attributes, or headers attributes on layout tables. ; F48: Failure due to using the title attribute to identify required fields or error fields instead of structural markup. ; F51: Failure due to using graphic symbols for presentation rather than structured lists. ; F68: Failure due to the association of label and user interface control not being programmatically determinable. ; F81: Failure due to using text formatting (such as bold or color) to identify a heading instead of structural heading markup. ; F87: Failure due to inserting non-decorative content via CSS pseudo-elements without ensuring it is programmatically determinable. ; F89: Failure due to using null alt on an image that contains information that is not presented in text alternative. ; F90: Failure due to incorrect association of label and form control using the aria-labelledby attribute. ; F91: Failure due to not using table markup for data tables. ; F92: Failure due to the use of role=”presentation” on content which has semantic meaning. |
G115 Use semantic HTML tags properly: structural headings (<h1>-<h6>), H48 lists (<ul>, <ol>, <dl>), H51 data tables (<th> with scope), and H44 connect form inputs structurally to <label> tags. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html |
WCAG 2.2 |
Structure, Forms, Tables |
Semantics, Landmarks, Headings, Form Labels, Data Tables, ARIA Roles |
| 1.3.2 |
Level A |
Adaptable |
1.3.2-Meaningful Sequence |
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. |
F1: Failure due to changing the meaning of content by positioning information using CSS. ; F32: Failure due to using white space characters to control spacing within a word. ; F34: Failure due to using white space characters to format tables in plain text content. ; F49: Failure due to using an HTML layout table that does not linearize top-to-bottom, left-to-right in a meaningful order. |
G57, C27 Ensure the underlying DOM code order matches the logical, meaningful visual reading order of the content; avoid relying on artificial CSS positioning to mask scrambled source HTML. |
Screen Reader Users, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html |
WCAG 2.2 |
Structure, Layout |
Reading Order, DOM Sequence, CSS Positioning, Layout Tables |
| 1.3.3 |
Level A |
Adaptable |
1.3.3-Sensory Characteristics |
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. |
F14: Failure due to identifying content using position or shape alone. ; F26: Failure due to providing instructions that rely solely on sound to identify components or steps. |
G96 Include clear textual descriptions alongside any sensory cues in instructions (e.g., add text names or numbers next to colored circles, specify item labels rather than just “the right column”). |
Screen Reader Users, Blind / Low Vision |
https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html |
WCAG 2.2 |
Design, Instructions |
Sensory Cues, Spatial Location, Audio Instructions |
| 1.3.4 |
Level AA |
Adaptable |
1.3.4-Orientation |
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. |
F97: Failure due to locking the display orientation to only portrait or landscape, unless a specific orientation is essential. |
G214 Avoid hardcoding orientation blocks in CSS or JavaScript; use fluid layouts and media queries that seamlessly support both portrait and landscape modes. |
Mobility Impairments, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/orientation.html |
WCAG 2.2 |
Layout, Mobile |
Orientation Lock, Responsive Design, Portrait, Landscape |
| 1.3.5 |
Level AA |
Adaptable |
1.3.5-Identify Input Purpose |
The purpose of each input field collecting information about the user can be programmatically determined when the input field serves a standard defined purpose and technology supports identifying the expected meaning. |
F107: Failure due to using an HTML autocomplete attribute value that does not match the expected input purpose for a user’s personal data. ; Failure: Leaving form inputs that collect common personal user information without standard HTML autocomplete attributes to assist user-agent personalization and autofill. |
H98 Add valid native autocomplete attributes (e.g., autocomplete=”given-name”, autocomplete=”email”) to standard input fields tracking private user context. |
Cognitive Disabilities, Mobility Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html |
WCAG 2.2 |
Forms, Input |
Autocomplete, Input Purpose, Autofill Metadata |
| 1.3.6 |
Level AAA |
Adaptable |
1.3.6-Identify Purpose |
In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined. |
Failure: Presenting user interface components, icons, or major sections of a page without standard technical properties or vocabularies (like ARIA microdata or landmarks) that allow personalization software to customize or hide elements. |
ARIA11 Implement standard ARIA landmarks, roles, and programmatic attributes (like aria-expanded or schema microdata) to allow third-party assistive/personalization software to alter icons and styles. |
Cognitive / Learning Disabilities, Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/identify-purpose.html |
WCAG 2.2 |
Structure, ARIA |
ARIA Landmarks, Personalization UI, Component Identification |
| 1.4.1 |
Level A |
Distinguishable |
1.4.1-Use of Color |
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. |
F13: Failure due to creating a link that cannot be distinguished from surrounding text by any visual means other than color. ; F73: Failure due to using a visual marker (such as color or underline) that disappears when the user alters the text color via user stylesheets. ; F81: Failure due to using text formatting (such as color or bold) to identify a heading instead of structural heading markup. |
G14 Supplement color changes with text indicators, G111 underlines for inline links, unique iconography, or distinct patterns/textures. |
Color Blindness, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html |
WCAG 2.2 |
Design, Color |
Color Dependence, Links, Headings, Visual Markers |
| 1.4.2 |
Level A |
Distinguishable |
1.4.2-Audio Control |
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. |
F23: Failure due to playing audio automatically for more than 3 seconds without providing an accessible mechanism to pause, stop, or control the volume independently. |
G60, G170 Avoid autoplay entirely, or add an easily discoverable control component at the very top of the page that enables pausing or muting the track instantly via keyboard. |
Screen Reader Users, Cognitive / Attention Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html |
WCAG 2.2 |
Multimedia, Audio |
Audio Control, Autoplay, Interference, Volume Control |
| 1.4.3 |
Level AA |
Distinguishable |
1.4.3-Contrast (Minimum) |
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for Large Text (3:1), Incidental text (inactive, pure decoration), and Logotypes (no requirement). |
F24: Failure due to the contrast ratio of text against its background being less than 4.5:1 (or 3:1 for large text). ; F83: Failure due to using background images that cause the contrast ratio of text to fall below minimum levels when the image scales or shifts. |
G18, G148 Select foreground/background colors that meet minimum contrast metrics (at least 4.5:1 for body text, 3:1 for text $\ge$ 18pt or 14pt bold); use CSS style layers to safeguard contrast over raw background images. |
Low Vision Users, Color Blindness |
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html |
WCAG 2.2 |
Design, Contrast |
Text Contrast, Background Images, Color Ratios |
| 1.4.4 |
Level AA |
Distinguishable |
1.4.4-Resize text |
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. |
F69: Failure due to clipping or overlapping text when the text scale is increased to 200%. ; F80: Failure due to the inability of text to scale to 200% because text container dimensions are hard-coded in absolute pixel units without accommodation for overflow. ; F94: Failure due to using a meta viewport element that prevents the user agent from scaling or zooming the content. |
G142, C28 Use relative CSS font units (rem, em, %) instead of absolute pixels (px), and style layouts using fluid flexbox grid structures that scale naturally up to 200% zoom boundaries. |
Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html |
WCAG 2.2 |
Layout, Text |
Text Scaling, Zoom 200%, Fixed Containers, Viewport Meta |
| 1.4.5 |
Level AA |
Distinguishable |
1.4.5-Images of Text |
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for Customizable images or where a particular presentation of text is Essential. |
F71: Failure due to using an image of text when a custom style or web font could achieve the same visual presentation while keeping the text machine-readable. |
G140, C30 Render structural typography using semantic HTML layouts and CSS styling/web fonts instead of engraving characters into raw bitmap images. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html |
WCAG 2.2 |
Images, Text |
Images of Text, CSS Layouts, Web Fonts |
| 1.4.6 |
Level AAA |
Distinguishable |
1.4.6-Contrast (Enhanced) |
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for Large Text (4.5:1), Incidental text, and Logotypes. |
Failure: Providing regular text with a contrast ratio against its background of less than 7:1, or large text with a ratio of less than 4.5:1. |
G17, G156 Select high-contrast color pairings that strictly meet or exceed 7:1 for normal elements and 4.5:1 for structural large text elements. |
Low Vision Users, Color Blindness |
https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html |
WCAG 2.2 |
Design, Contrast |
Enhanced Contrast, 7:1 Ratio, High Contrast |
| 1.4.7 |
Level AAA |
Distinguishable |
1.4.7-Low or No Background Audio |
For prerecorded audio-only content containing primary speech, background sounds are either non-existent, can be turned off, or are at least 20 decibels lower than the foreground speech. |
Failure: Broadcasting prerecorded audio content where background music or ambient sound is less than 20 decibels lower than the primary foreground speech. |
G56 Provide master audio tracks without background noise, incorporate an audio control option to kill background tracks completely, or mix tracks with a 20dB threshold gap. |
Hard of Hearing, Cognitive / Attention Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/low-or-no-background-audio.html |
WCAG 2.2 |
Multimedia, Audio |
Background Audio, Decibel Level, Speech Isolation |
| 1.4.8 |
Level AAA |
Distinguishable |
1.4.8-Visual Presentation |
For blocks of text, mechanisms allow choosing colors, text width under 80 chars, no text justification, line spacing at least 1.5, paragraph spacing at least 2.25, and text resizing to 200% without horizontal scrolling. |
F88: Failure due to using text that is fully justified (aligned to both left and right margins) without providing a way to remove the justification. ; Failure: Forcing absolute layout widths, fixed line heights, or restrictive font spacing that prevents layout adjustments via custom browser stylesheets. |
G148 Provide layout configuration switches or G156 code clean liquid style containers that do not force text justification, G172 keep lines below 80 characters, and adapt fluidly to font override tools. |
Cognitive Disabilities, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html |
WCAG 2.2 |
Layout, Text |
Text Justification, Text Customization, Reflow Ratios |
| 1.4.9 |
Level AAA |
Distinguishable |
1.4.9-Images of Text (No Exception) |
Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. |
Failure: Using images of text for corporate logos, branding, or user interface components where standard styled text and CSS can achieve the visual requirements. |
G140 Implement true semantic text fields styled comprehensively with advanced CSS properties for all headers, structural layouts, labels, and branding components. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/images-of-text-no-exception.html |
WCAG 2.2 |
Images, Text |
Strict Images of Text, No Brand Exceptions |
| 1.4.10 |
Level AA |
Distinguishable |
1.4.10-Reflow |
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: Vertical scrolling content at 320 CSS pixels wide; Horizontal scrolling content at 256 CSS pixels high. |
F102: Failure due to content disappearing or requiring two-dimensional scrolling when the viewport width is reduced down to 320 CSS pixels. |
G206 Apply adaptive CSS grid/flexbox components, responsive breakpoints, and absolute maximum fluid configurations using max-width: 100% on assets to avoid 2D scrolling layout artifacts at 320px. |
Low Vision Users (High Zoom), Mobile Users |
https://www.w3.org/WAI/WCAG22/Understanding/reflow.html |
WCAG 2.2 |
Layout, Responsive |
Reflow, Responsive Breakpoints, Horizontal Scroll, 320px Viewport |
| 1.4.11 |
Level AA |
Distinguishable |
1.4.11-Non-text Contrast |
The visual presentation of User Interface Components and Graphical Objects have a contrast ratio of at least 3:1 against adjacent color(s). |
Failure: Presenting active interactive user interface control boundaries, states, or critical graphical charts with a contrast ratio of less than 3:1 against background colors. |
G195, G207 Style input visual boundaries, interactive button components, focus ring states, and vector infographics to retain at least a 3:1 contrast ratio against background fields. |
Low Vision Users, Color Blindness |
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html |
WCAG 2.2 |
Design, Contrast |
Non-text Contrast, UI Components, Icons, Form Focus, Charts |
| 1.4.12 |
Level AA |
Distinguishable |
1.4.12-Text Spacing |
In content using markup languages, no loss of functionality occurs by setting line height to 1.5, paragraph spacing to 2, letter spacing to 0.12, and word spacing to 0.16 times font size. |
F104: Failure due to text clipping, overlapping, or truncation within containers when a user applies custom text spacing style overrides. |
G210 Ensure text-holding layout components allow for spatial expansion and don’t restrict heights; avoid hardcoding fixed truncation bounds so layout wraps gracefully when metrics shift. |
Low Vision Users, Dyslexic Users |
https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html |
WCAG 2.2 |
Layout, Text |
Text Spacing Overrides, Container Overflow, Letter Spacing |
| 1.4.13 |
Level AA |
Distinguishable |
1.4.13-Content on Hover or Focus |
Where pointer hover or keyboard focus triggers additional content to become visible and then hidden, the content is Dismissable, Hoverable, and Persistent. |
Failure: Creating custom tooltips, submenus, or popovers triggered by hover or focus that cannot be closed using the Escape key or without relocating the pointer. ; Failure: Additional content disappears automatically after a brief timeout while the user is actively reading it. |
G211 Ensure popups/tooltips can be hidden with the Escape key, allow the mouse pointer to travel directly over the popup content safely, and keep it active until interaction ends. |
Low Vision Users, Screen Reader Users, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html |
WCAG 2.2 |
UI Components, Popups |
Tooltips, Hover States, Keyboard Focus, Dismissable Content |
| 2.1.1 |
Level A |
Keyboard Accessible |
2.1.1-Keyboard |
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. |
F15: Failure due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely. ; F42: Failure due to using scripted handlers to provide link behavior on an element that cannot be programmatically determined to be a link. ; F54: Failure due to using only pointer-specific event handlers (such as client-side scripts that trigger on mousedown) for device-independent actions. |
G90, H91 Bind native element hooks or map standardized event listeners (e.g., standard keydown, click) to execute logic via standard keys like Enter and Spacebar. |
Screen Reader Users, Motor Impairments, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html |
WCAG 2.2 |
Interactivity, Keyboard |
Keyboard Navigation, Device Independence, Mouse Event Handlers |
| 2.1.2 |
Level A |
Keyboard Accessible |
2.1.2-No Keyboard Trap |
If keyboard focus can be moved to one of the components of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. |
F10: Failure due to breaking keyboard navigation by trapping focus within a specific embedded UI component or plugin widget (e.g., flash, media player, code editor) with no exit key sequence. |
G21 Ensure modal script dialogs or complex rich app views close or return context properly; never trap focus inside isolated canvas/plugin loops. |
Motor Impairments, Switch Access Users, Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html |
WCAG 2.2 |
Interactivity, Keyboard |
Keyboard Trap, Focus Management, Modal Dialogs |
| 2.1.3 |
Level AAA |
Keyboard Accessible |
2.1.3-Keyboard (No Exception) |
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. |
Failure: Any element, tool, canvas drawing module, or interactive map control that explicitly forces standard mouse movements or swipe patterns with no keyboard-driven fallback alternative. |
G90 Ensure every single interactive operation, control adjustment, visual mapping step, or setting can be targeted and triggered natively via linear keyboard strings. |
Motor Impairments, Blind Users, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception.html |
WCAG 2.2 |
Interactivity, Keyboard |
Strict Keyboard, No Path Exceptions, Full Operability |
| 2.1.4 |
Level A |
Keyboard Accessible |
2.1.4-Character Key Shortcuts |
If a keyboard shortcut is implemented in content using only letter, punctuation, number, or symbol characters, then the shortcut can be turned off, remapped, or is active only on focus. |
Failure: Assigning single character shortcut keys (e.g., pressing “m” to open messages) without any structural option for a user to disable or adjust the binding. |
G217 Provide an accessible application configuration framework that lets users clear or remap hotkeys, or confine hotkey execution strictly to active component focus bounds. |
Speech Recognition Users, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html |
WCAG 2.2 |
Interactivity, Keyboard |
Single-Key Shortcuts, Remapping, Voice Input Conflicts |
| 2.2.1 |
Level AA |
Enough Time |
2.2.1-Timing Adjustable |
For each time limit that is set by the content, the user can Turn off, Adjust, or Extend the limit before it occurs, with minimal exceptions (Real-time, Essential, or 20 Hour exceptions). |
F58: Failure due to setting a time limit that cannot be turned off, extended, or adjusted by the user prior to expiration. |
G198 Build functional warning dialog boxes that alert users before expiration, offering a simple click/keystroke mechanism to scale or extend the window by at least 10x baseline limits. |
Cognitive Disabilities, Motor Impairments, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html |
WCAG 2.2 |
Interactivity, Session |
Time Limits, Session Timeout, Extendable Timers |
| 2.2.2 |
Level A |
Enough Time |
2.2.2-Pause, Stop, Hide |
For moving, blinking, scrolling, or auto-updating information, mechanisms allow the user to Pause, Stop, or Hide it, unless it is part of an activity where it is essential. |
F4: Failure due to using text or graphics that flash or blink continuously without providing an absolute pause mechanism. ; F7: Failure due to an object or applet moving/blinking for more than five seconds without a control to pause or hide it. ; F16: Failure due to providing continuous background scrolling indicators or data ticker systems that cannot be turned off. |
G186, G187 Provide prominent physical controls (like a global pause/play button) to stop looping carousels, tickers, or auto-refresh data loops running beyond 5 seconds. |
Cognitive Disabilities (ADHD), Vestibular Disorders |
https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html |
WCAG 2.2 |
Layout, Multimedia |
Autoplay, Carousels, Blinking Text, Animated GIFs, Moving Content |
| 2.2.3 |
Level AAA |
Enough Time |
2.2.3-No Timing |
Timing is not an essential part of any event or activity presented by the content, except for non-interactive synchronized media and real-time events. |
Failure: Imposing any background time windows or countdown gates on standard web activities like online intake questionnaires or basic quiz panels. |
G5 Architect application processing and intake sequence mechanisms without hard deadline constraints or time gates entirely. |
Cognitive Disabilities, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html |
WCAG 2.2 |
Interactivity, Session |
Zero Timers, Absolute Time Freedom |
| 2.2.4 |
Level AAA |
Enough Time |
2.2.4-Interruptions |
Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. |
Failure: Forcing non-emergency promotional alerts, chat window expansion modules, or content updates to take over the application focus without consent. |
G193 Add configuration flags allowing the client interface to queue background alerts, or completely mute dynamic unprompted chat/advertisement interruptions. |
Cognitive Disabilities (Distraction), Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html |
WCAG 2.2 |
Interactivity, Popups |
Popups, Alert Management, Context Interruption |
| 2.2.5 |
Level AAA |
Enough Time |
2.2.5-Re-authenticating |
When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. |
Failure: Expiring a transactional user session (e.g., checkout sequence or multidocument submission form) and wiping out all typed form input values upon re-login. |
G105 Retain complex multi-tier form inputs locally or via secure state caches so that upon passing authentication checks, data is fully repopulated without data loss. |
Cognitive Disabilities, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/re-authenticating.html |
WCAG 2.2 |
Forms, Session |
Session Expiration, Data Preservation, Secure Re-login |
| 2.2.6 |
Level AAA |
Enough Time |
2.2.6-Timeouts |
Users are warned of any user inactivity that could result in data loss, unless the data is preserved for more than 20 hours of user inactivity. |
Failure: Silently terminating a user’s logged-in session due to a period of total keyboard/mouse inactivity without broadcasting a clear visual and structural warning. |
G215 Provide structural alert notices immediately at the beginning of an access tunnel indicating the exact minutes of inactivity that trigger a data wipe event. |
Cognitive Disabilities, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/timeouts.html |
WCAG 2.2 |
Interactivity, Session |
Inactivity Warnings, Timeout Alerts, Data Loss Prevention |
| 2.3.1 |
Level A |
Seizures and Physical Reactions |
2.3.1-Three Flashes or Below Threshold |
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. |
F11: Failure due to displaying video or graphic content that flashes more than three times in any single one-second window, breaching safe human limits. |
G19 Audit and edit media streams to guarantee visual animation cycles do not loop or flash greater than 3x in a one-second range, or maintain flash bounds below General Flash Thresholds. |
Photosensitive Epilepsy, Vestibular Disorders |
https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html |
WCAG 2.2 |
Multimedia, Design |
Seizure Warning, Flashing Content, Refresh Rates |
| 2.3.2 |
Level AAA |
Seizures and Physical Reactions |
2.3.2-Three Flashes |
Web pages do not contain anything that flashes more than three times in any one second period. |
Failure: Incorporating any element or visual track that flashes or alternates rapidly in brightness more than three times a second, completely disregarding size parameters. |
G19 Ensure absolute elimination of rapid flash/strobing layout changes on the page entirely, strictly bypassing size exception bounds. |
Photosensitive Epilepsy, Vestibular Disorders |
https://www.w3.org/WAI/WCAG22/Understanding/three-flashes.html |
WCAG 2.2 |
Multimedia, Design |
Strict Flashing Limits, Seizure Safeguards |
| 2.3.3 |
Level AAA |
Seizures and Physical Reactions |
2.3.3-Animation from Interactions |
Motion animation triggered by user interaction can be turned off, unless the animation is essential to the information or the functionality is being conveyed. |
Failure: Forcing full-page parallax scrolling effects or extreme zoom transitions when a user hovers or scrolls, with no way to turn off via settings or standard media queries. |
G216 Check and respect the native system preferences by pairing animations with CSS @media (prefers-reduced-motion: reduce) logic blocks to skip non-essential layout shifts. |
Vestibular Disorders, Motion Sickness |
https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html |
WCAG 2.2 |
Layout, Design |
Parallax Motion, Reduced Motion, Animation Controls |
| 2.4.1 |
Level A |
Navigable |
2.4.1-Bypass Blocks |
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. |
F44: Failure due to using a skip link that is hidden visually in a way that prevents it from gaining clear visual focus for keyboard users. ; Failure: Total lack of a skip-to-main-content landmark link on a multi-tier site with dense header navigation menus. |
G1 Implement an early keyboard-accessible “Skip to Main Content” landmark link at the absolute top of the page DOM, and H64 map meaningful structural HTML landmarks like <main>. |
Keyboard Users, Switch Access Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html |
WCAG 2.2 |
Structure, Navigation |
Skip Links, Repetitive Blocks, Main Content, ARIA Landmarks |
| 2.4.2 |
Level A |
Navigable |
2.4.2-Page Titled |
Web pages have titles that describe topic or purpose. |
F25: Failure due to leaving the document <title> blank, using generic strings (e.g., “Untitled Document”), or repeating identical titles across different deep sub-pages. |
G88, H25 Write clear, distinct, descriptive <title> tags for every distinct page template that specify the precise topic and unique location on the site. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html |
WCAG 2.2 |
Structure, Navigation |
Page Titles, Head Element, Browser Tabs |
| 2.4.3 |
Level A |
Navigable |
2.4.3-Focus Order |
If a Web page can be sequentially navigated and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. |
F44: Failure due to utilizing custom structural elements that move visual keyboard focus randomly without tracking the structural tree layout. ; F85: Failure due to leaving active hidden modal popup items accessible within the standard tab loop sequence. |
G59, H4 Order interactive components logically inside the HTML source DOM to match the visual layout pattern; manage active focus scripts programmatically when expanding overlays or modals. |
Keyboard Users, Screen Reader Users, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html |
WCAG 2.2 |
Interactivity, Keyboard |
Tab Order, Focus Management, DOM Traversal, Custom Widgets |
| 2.4.4 |
Level A |
Navigable |
2.4.4-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 link context, except where the purpose of the link would be ambiguous to users in general. |
F63: Failure due to using uninformative standalone link text (like “click here”, “read more”, “download”) without attaching structural contextual text. |
G53 Write explicit, descriptive link text directly, or programmatically attach contextual indicators using H77 parent sentence strings, H81 lists, or explicit aria-describedby tokens. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html |
WCAG 2.2 |
Interactivity, Navigation |
Link Text, Contextual Labels, Descriptive Anchors |
| 2.4.5 |
Level AA |
Navigable |
2.4.5-Multiple Ways |
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. |
Failure: Forcing a user to strictly follow a nested linear tier of layout buttons to locate deep index pages, providing no universal site search or directory map block. |
G125 Provide multiple distinct navigational pathways, combining G161 global dropmenus with a global site search bar, or G63 publishing an XML/HTML Site Map panel. |
Cognitive Disabilities, Blind Users |
https://www.w3.org/WAI/WCAG22/Understanding/multiple-ways.html |
WCAG 2.2 |
Structure, Navigation |
Site Search, XML Sitemaps, Navigation Paths |
| 2.4.6 |
Level AA |
Navigable |
2.4.6-Headings and Labels |
Headings and labels describe topic or purpose. |
Failure: Deploying structural heading tags (`<h1>`-`<h6>`) or form `<label>` strings that are blank, redundant, or use ambiguous text like “Section 1” or “Submit Field”. |
G130, G131 Compose precise, unique visual section headings and specific form input description text that explicitly details the task or field content. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html |
WCAG 2.2 |
Structure, Forms |
Descriptive Headings, Label Text, Section Titles |
| 2.4.7 |
Level AA |
Navigable |
2.4.7-Focus Visible |
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. |
F86: Failure due to explicit injection of CSS declarations like `outline: none` or `outline: 0` on active interactive states without providing a replacement focus ring. |
G149, G165, C40 Author high-contrast CSS focus ring styles using pseudo-selectors like :focus or :focus-visible to clearly isolate the active component. |
Keyboard Users, Low Vision Users, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html |
WCAG 2.2 |
Interactivity, Keyboard |
Focus Indicators, Outline Styles, Focus Ring visibility |
| 2.4.8 |
Level AAA |
Navigable |
2.4.8-Location |
Information about the user’s location within a set of Web pages is available. |
Failure: Total absence of location signifiers like visual breadcrumbs, custom menu highlights, or state markers on a complex nested software platform. |
G65, G128 Implement dynamic structural location indicators, such as breadcrumb link navigation clusters or active state variables within primary header menus. |
Cognitive Disabilities, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/location.html |
WCAG 2.2 |
Structure, Navigation |
Breadcrumbs, Active State Indicators, Current Page Location |
| 2.4.9 |
Level AAA |
Navigable |
2.4.9-Link Purpose (Link Only) |
A mechanism is available to allow the purpose of each link to be identified from the link text alone, except where the purpose of the link would be ambiguous to users in general. |
Failure: Publishing repetitive standalone link patterns such as “Download” across a text data grid, forcing users to scan surrounding sentences to determine what file is being targeted. |
G91 Ensure the raw independent string within anchor elements is explicitly distinct and meaningful on its own (e.g., “Download Q1 Financial Report”) without outside alignment context. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-link-only.html |
WCAG 2.2 |
Interactivity, Navigation |
Standalone Links, Strict Link Text, Context Isolation |
| 2.4.10 |
Level AAA |
Navigable |
2.4.10-Section Headings |
Section headings are used to organize the content. |
Failure: Presenting a very long, dense textual report or multifaceted control panel document without utilizing any structural HTML section dividers or headings. |
G141 Embed clear, hierarchical nested heading tags (<h1> down through <h6>) to split lengthy structural reading content into discoverable content sections. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/section-headings.html |
WCAG 2.2 |
Structure |
Section Headings, Document Organization, Content Outlines |
| 2.4.11 |
Level AA |
Navigable |
2.4.11-Focus Appearance (Minimum) |
An indicator of keyboard focus has an area of at least 2 font-size CSS pixels, and a contrast ratio of at least 3:1 between the focused and unfocused states. |
Failure: Providing a keyboard focus ring that is too thin (e.g., less than 1px dashed line) or has an unsafe contrast ratio below 3:1 against background layers. |
G195 Style focused outline components to ensure the bounding visual box features an area $\ge 2 \times \text{perimeter line width}$, tracking at least a 3:1 contrast ratio against the component states. |
Low Vision Users, Keyboard Users |
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html |
WCAG 2.2 |
Interactivity, Keyboard |
Focus Sizing, Focus Contrast, Focus Enclosure |
| 2.4.12 |
Level AAA |
Navigable |
2.4.12-Focus Appearance (Enhanced) |
An indicator of keyboard focus has an area of at least 4 font-size CSS pixels, a contrast ratio of at least 4.5:1, and does not obscure the component. |
Failure: Failing to design a high-contrast focus ring that cleanly frames or outlines the entire component border without any overlap or text clipping. |
G149 Build a robust focus outline style tracking a 4.5:1 contrast ratio against any surrounding layouts, ensuring the outline ring frames or encloses the item cleanly without visual overlap. |
Low Vision Users, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced.html |
WCAG 2.2 |
Interactivity, Keyboard |
Enhanced Focus, 4.5:1 Focus Contrast, Component Outline |
| 2.4.13 |
Level AAA |
Navigable |
2.4.13-Focus Not Obscured (Minimum) |
When a user interface component receives keyboard focus, the component is not entirely obscured by author-created content. |
Failure: Allowing a sticky page header, sticky banner, or floating chat module to scroll directly over an item currently receiving active keyboard focus. |
CSS Layouts Use scroll padding configurations (scroll-padding-top, etc.) in CSS to ensure focused inputs remain visually clear of sticky header bars or overlapping floating modules during keyboard navigation. |
Keyboard Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html |
WCAG 2.2 |
Layout, Navigation |
Sticky Elements, Overlapping Content, Focus Visibility |
| 2.5.1 |
Level A |
Pointer Alternatives |
2.5.1-Pointer Gestures |
All functionality that operates using multipoint or path-based gestures can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. |
F105: Failure due to expecting users to complete a complex multipoint pinch-to-zoom or swipe pattern with no fallback tap interface elements. |
G215 Integrate single-pointer tap/click component alternatives alongside G216 path gestures (e.g., add standalone zoom + / – click buttons next to an interactive multi-touch map grid). |
Motor Impairments, One-Handed Users |
https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures.html |
WCAG 2.2 |
Interactivity, Touch/Pointer |
Gesture Fallbacks, Single Pointer, Touch Target Inputs |
| 2.5.2 |
Level A |
Pointer Alternatives |
2.5.2-Pointer Cancellation |
For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event, Up-Event Activation/Cancellation, or Reversal. |
F106: Failure due to triggering permanent transaction actions instantly on the primary `mousedown` or `pointerdown` event with no cancellation mechanism. |
G218 Execute operational logic on the standard pointer mouseup or click event phase; if tracking mousedown, provide a clear tracking zone that cancels out when dragging away. |
Motor Impairments, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html |
WCAG 2.2 |
Interactivity, Touch/Pointer |
Pointer Down Event, Click Cancellation, Up-Event Triggering |
| 2.5.3 |
Level A |
Pointer Alternatives |
2.5.3-Label in Name |
For User Interface Components with labels that include text or images of text, the name contains the text that is presented visually. |
F96: Failure due to visual button text completely mismatching the underlying `aria-label` attribute value, breaking speech recognition software targeting. |
G208 Align the text string embedded inside an explicit aria-label attribute to strictly contain the exact visual typography shown on the face of the component control. |
Speech Recognition Users, Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html |
WCAG 2.2 |
Forms, ARIA |
Accessible Name, Visual Labels, Speech Commands, ARIA Mismatches |
| 2.5.4 |
Level A |
Pointer Alternatives |
2.5.4-Motion Actuation |
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled. |
Failure: Requiring a physical device shake or tilt gesture to refresh page inputs or clear form blocks with no layout button alternative. |
G213 Provide standard interactive layout elements (like a manual button) to achieve the action, and supply a configuration setting to let users switch off hardware accelerometer listening loops. |
Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/motion-actuation.html |
WCAG 2.2 |
Interactivity, Mobile |
Device Shaking, Motion Disabling, Sensor Input Alternatives |
| 2.5.5 |
Level AAA |
Pointer Alternatives |
2.5.5-Target Size (Enhanced) |
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except for inline targets, adjacent link exemptions, or essential layouts. |
Failure: Making critical active touchscreen buttons or icon links smaller than 44×44 CSS pixels in size, leading to mis-taps. |
G214 Code all target links, form parameters, and active custom icon elements to feature a physical hit bounding box layout of at least $44 \times 44$ CSS pixels. |
Motor Impairments, Low Vision Users, Mobile Users |
https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html |
WCAG 2.2 |
Interactivity, Touch/Pointer |
44px Targets, Touch Hit Area, Button Sizing |
| 2.5.6 |
Level AAA |
Pointer Alternatives |
2.5.6-Concurrent Input Mechanisms |
Web content does not restrict use of input mechanisms on a platform except where the restriction is essential to ensure security or respect user settings. |
Failure: Actively ignoring or blocklisting an external hardware keyboard or attached mouse on a mobile device display layout. |
G212 Maintain open support for touch, external trackball pointers, styluses, and external keyboards concurrently; do not drop event listeners when switching devices. |
Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/concurrent-input-mechanisms.html |
WCAG 2.2 |
Interactivity, Hardware |
Input Switching, Peripheral Support, Device Constraints |
| 2.5.7 |
Level AA |
Pointer Alternatives |
2.5.7-Dragging Movements |
All functionality that mouse dragging can perform can also be achieved by a single pointer without dragging, unless dragging is essential. |
Failure: Forcing a standard dragging motion to adjust an interactive price range slider or sorting grid with no standard click-to-activate layout fallback. |
Pointer Fallbacks Provide a click/tap single-pointer alternative workflow (e.g., clicking up/down arrow buttons on a list element, tapping a destination grid box after selection, or using input text fields alongside sliders). |
Motor Impairments, Switch Access Users |
https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html |
WCAG 2.2 |
Interactivity, Touch/Pointer |
Drag-and-Drop, Slider Inputs, Single Pointer Fallbacks |
| 2.5.8 |
Level AA |
Pointer Alternatives |
2.5.8-Target Size (Minimum) |
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, or targets are positioned with sufficient spacing around them. |
Failure: Nesting small clickable icon indicators that are less than 24×24 CSS pixels without checking minimum target spacing circles. |
Sizing Overrides Ensure active element bounds hit $24 \times 24$ CSS pixels minimum. If a smaller target size is required visually, insert CSS outer padding to achieve a 24px diameter separation circle clear of adjacent links. |
Motor Impairments, Mobile Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html |
WCAG 2.2 |
Interactivity, Touch/Pointer |
24px Target Sizing, Component Spacing, Touch Targets |
| 3.1.1 |
Level A |
Readable |
3.1.1-Language of Page |
The default human language of each Web page can be programmatically determined. |
F59: Failure due to omitting the `lang` attribute entirely on the root `<html>` element, or typing an invalid ISO language code. |
H57 Inject a valid ISO country/language shorthand tag directly inside the primary parent container (e.g., <html lang=”en”> or <html lang=”es”>). |
Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html |
WCAG 2.2 |
Structure, Text |
HTML Lang Attribute, Speech Engine Synthesis, Document Localization |
| 3.1.2 |
Level AA |
Readable |
3.1.2-Language of Parts |
The human language of each phrase or passage in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediate surrounding text. |
F2: Failure due to embedding long foreign-language blocks or quotes directly inside a text section without applying a localized inline `lang=”…”` container markup attribute. |
H58 Frame localized foreign-language quotes or nested semantic paragraph components with localized attribute markers (e.g., <span lang=”fr”>…</span>). |
Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts.html |
WCAG 2.2 |
Structure, Text |
Inline Language, Multi-lingual Parsing, Accent Switching |
| 3.1.3 |
Level AAA |
Readable |
3.1.3-Unusual Words |
A mechanism is available for identifying specific definitions of words used in an unusual or restricted way, including idioms and jargon. |
Failure: Mixing extremely dense context-specific jargon or regional slang across instructional guidelines without offering tooltips, glossary lists, or text references. |
G101, H54 Provide inline definitions immediately upon initial use, embed a dedicated contextual glossary reference link, or deploy semantic <dfn> definition elements. |
Cognitive Disabilities, Dyslexic Users |
https://www.w3.org/WAI/WCAG22/Understanding/unusual-words.html |
WCAG 2.2 |
Text, Content |
Jargon Definitions, Glossaries, Idiom Explanations |
| 3.1.4 |
Level AAA |
Readable |
3.1.4-Abbreviations |
A mechanism is available for identifying the expanded form or definition of abbreviations. |
Failure: Publishing unique acronyms or structural abbreviations without explaining their full textual meaning upon initial occurrence. |
G102, H28 Provide the full text expansion directly before/after an abbreviation, use an interactive global abbreviation lexicon tool, or mark strings with <abbr> elements. |
Cognitive Disabilities, Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/abbreviations.html |
WCAG 2.2 |
Text, Content |
Acronym Expansions, Abbreviations, Abbr Tag Markup |
| 3.1.5 |
Level AAA |
Readable |
3.1.5-Reading Level |
When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, a clear summary version is available. |
Failure: Structuring core user setup manuals or portal instructional content with dense linguistic complexity requiring an advanced doctoral degree, without providing a simplified guide option. |
G79, G153 Author text clearings using plain-language layout practices; compose an alternative, secondary simple summary tracking lower secondary education readability metrics. |
Cognitive / Learning Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html |
WCAG 2.2 |
Text, Content |
Plain Language summaries, Readability Indexes, Clear Documentation |
| 3.1.6 |
Level AAA |
Readable |
3.1.6-Pronunciation |
A mechanism is available for identifying the specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation. |
Failure: Presenting heteronyms in layout sections where sentence structural phrasing fails to clarify intent. |
G120, G163 Map explicit pronunciation helper attributes, link to phonetic spoken files, or mark up text words directly using specialized ruby characters. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/pronunciation.html |
WCAG 2.2 |
Text, Content |
Pronunciation Keys, Audio Guides, Ambiguous Phonetics |
| 3.2.1 |
Level A |
Predictable |
3.2.1-On Focus |
When any user interface component receives focus, it does not initiate a change of context. |
F52: Failure due to launching automatic popups, shifting layout panels, or executing form updates the instant an element receives standard keyboard tab focus. |
G107 Restrict element focus loops to styling/highlight selection logic; verify that context shifting triggers like window redirects happen strictly via explicit click activations. |
Keyboard Users, Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html |
WCAG 2.2 |
Interactivity, Behavior |
Focus Context Changes, Tab Navigation Behavior, Form Traversal |
| 3.2.2 |
Level A |
Predictable |
3.2.2-On Input |
Changing the setting of any user interface component does not automatically initiate a change of context unless the user has been advised of the behavior before using the component. |
F36: Failure due to auto-submitting a data transaction form, launching new browser view tabs, or refreshing layouts upon checking a checkbox or radio button element. |
G80, G13 Provide an explicit “Submit” or “Apply” button next to checkbox/select fields; explicitly warn users beforehand via visual text if an input choice forces a layout redirect. |
Screen Reader Users, Cognitive Disabilities, Keyboard Users |
https://www.w3.org/WAI/WCAG22/Understanding/on-input.html |
WCAG 2.2 |
Interactivity, Behavior |
Input Event Triggers, Auto-submit Forms, Context Redirection |
| 3.2.3 |
Level AA |
Predictable |
3.2.3-Consistent Navigation |
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. |
F66: Failure due to randomly rearranging the structural order of site menu links or moving global navigation panels across different subpages. |
G61 Implement universal template header/sidebar master layouts that hold identical menu strings in a matching sequence across all domain views. |
Cognitive Disabilities, Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html |
WCAG 2.2 |
Structure, Navigation |
Consistent Headers, Global Navigation order, Structural Templates |
| 3.2.4 |
Level AA |
Predictable |
3.2.4-Consistent Identification |
Components that have the same functionality within a set of Web pages are identified consistently. |
F31: Failure due to utilizing different text labels or icon graphics for elements executing the exact same function (e.g., calling an icon “Search” on page A and “Find” on page B). |
G197 Standardize naming conventions and alt text properties across the site; use identical iconography and text strings for elements running matching backend functions. |
Cognitive Disabilities, Screen Reader Users |
https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification.html |
WCAG 2.2 |
UI Components, Design |
Consistent Suffixes, Icon Standardization, Component Naming |
| 3.2.5 |
Level AAA |
Predictable |
3.2.5-Change on Request |
Changes of context are initiated only by user request or a mechanism is available to turn off such changes. |
Failure: Automatic timer-driven system redirects, unannounced location updates, or random platform popups executing without explicit user confirmation click. |
G110 Strip automated refresh/redirect triggers out of meta heads; execute context shifts entirely behind user-initiated mouse clicks or explicit keyboard commands. |
Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/change-on-request.html |
WCAG 2.2 |
Interactivity, Behavior |
User-Initiated Changes, Forced Redirection, Live Content Interruption |
| 3.2.6 |
Level AA |
Predictable |
3.2.6-Consistent Help |
If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages, they occur in the same relative order: Contact Info, Chat Module, or Self-Help options. |
Failure: Shifting the physical placement or appearance order of support links, contact numbers, or chat icons across individual application views. |
Help Overrides Fix the relative order and layout coordinates of repeating support channels (e.g., place the support chatbot link at the lower right corner, or pin contact links inside identical footer blocks). |
Cognitive Disabilities, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html |
WCAG 2.2 |
Structure, Navigation |
Help Desk Links, Support Chat Positioning, Contact Layouts |
| 3.3.1 |
Level A |
Input Assistance |
3.3.1-Error Identification |
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. |
Failure: Displaying error states purely via red outline borders around field controls without adding clear descriptive error text strings. |
G83, G85, H89 Generate clear inline error summary strings detailing the issue, link them to inputs using aria-describedby tokens, and alert AT utilizing role=”alert” boxes. |
Color Blindness, Screen Reader Users, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html |
WCAG 2.2 |
Forms, Validation |
Error Alerts, Textual Errors, Form Fields |
| 3.3.2 |
Level A |
Input Assistance |
3.3.2-Labels or Instructions |
Labels or instructions are provided when content requires user input. |
F82: Failure due to using visual placeholder text inside an input field as its only descriptor label, which vanishes when text entry begins. |
G184, H44 Pair all input field units with an explicitly defined visual <label> tag, include specific syntax requirements (e.g., “Date format: YYYY-MM-DD”), and mark required fields clearly. |
Cognitive Disabilities, Motor Impairments, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html |
WCAG 2.2 |
Forms, Input |
Form Field Labels, Input Formatting Hints, Required Indicator Marks |
| 3.3.3 |
Level AA |
Input Assistance |
3.3.3-Error Suggestion |
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize security or purpose. |
Failure: Giving ambiguous text errors (“Invalid input”) without specifying syntax rules or format examples (“Enter date as MM/DD/YYYY”). |
G177, G84 Parse field entries programmatically and serve specific syntax remediation hints directly within the validation notice text block (e.g., “Password requires 1 uppercase letter”). |
Cognitive Disabilities, Blind Users |
https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html |
WCAG 2.2 |
Forms, Validation |
Form Remediation, Correction Hints, Descriptive Errors |
| 3.3.4 |
Level AA |
Input Assistance |
3.3.4-Error Prevention (Legal, Financial, Data) |
For Web pages that cause legal commitments or financial transactions to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: Reversible, Checked, or Confirmed. |
Failure: Finalizing online bank wire transfers or permanent account termination files instantly upon click, without a secondary confirmation screen or edit dashboard view. |
G164, G155, G168 Provide a final transactional verification screen featuring structured edit checks, allow users to cancel and undo actions, or mandate an explicit pre-submission overview phase. |
Motor Impairments, Cognitive Disabilities, Blind Users |
https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data.html |
WCAG 2.2 |
Forms, Financial |
Data Reversibility, Review Panels, Transaction Verifications |
| 3.3.5 |
Level AAA |
Input Assistance |
3.3.5-Help |
Context-sensitive help is available. |
Failure: Presenting intricate calculations or form tracking blocks on an intake system without integrating text instructions or instant help tools. |
G89, G194, H89 Embed localized tooltips, provide easily discoverable inline help links anchored to text parameters, or implement persistent sidebar support breakdowns. |
Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/help.html |
WCAG 2.2 |
Forms, Navigation |
Contextual Help, Inline Definitions, Support Overlays |
| 3.3.6 |
Level AAA |
Input Assistance |
3.3.6-Error Prevention (All) |
For Web pages that require the user to submit information, at least one of the following is true: Reversible, Checked, or Confirmed. |
Failure: Processing typical everyday form data updates (like custom application profile edits) with no modification panel or cancellation capability. |
G98, G155 Implement a comprehensive validation check overlay across all fields, and integrate a native 100% data rolling mechanism to reverse any submission state modifications. |
Motor Impairments, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-all.html |
WCAG 2.2 |
Forms, Validation |
Universal Error Prevention, Input Checks, Finalize Edits |
| 3.3.7 |
Level AA |
Input Assistance |
3.3.7-Redundant Entry |
Information previously entered by the user in the same process that is required to be entered again is either auto-populated or available for selection, except where re-entry is essential. |
Failure: Forcing a user to manually re-type their complete home mailing address across consecutive steps of an application funnel with no auto-fill checkbox. |
G220 Auto-populate repeated fields using backend data models, or include a functional checkbox control (e.g., “Billing address same as shipping address”) that clones inputs instantly. |
Motor Impairments, Cognitive Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html |
WCAG 2.2 |
Forms, Input |
Data Duplication, Form Optimization, Step-by-Step Intake |
| 3.3.8 |
Level AA |
Input Assistance |
3.3.8-Accessible Authentication (Minimum) |
A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step of an authentication process unless an alternative or exception is provided (e.g., copy-paste support or object recognition). |
Failure: Restricting users from using copy-and-paste commands into password entry controls, forcing manual code entry. |
G221 Ensure password fields fully support native operating system copy-and-paste operations, enable WebAuthn biometric login sequences, or supply simple magic links via email. |
Cognitive Disabilities, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html |
WCAG 2.2 |
Forms, Security |
Cognitive Login, Copy-Paste Support, Captcha Exemptions |
| 3.3.9 |
Level AAA |
Input Assistance |
3.3.9-Accessible Authentication (Enhanced) |
A cognitive function test is not required for any step of an authentication process unless an alternative is provided or an exception for object recognition or personal content applies. |
Failure: Demanding complex text mathematical calculations or puzzle completion metrics to authenticate or access an account view. |
G221 Build authentication pathways relying exclusively on native hardware authentication mechanisms, standard copy/paste actions, or email magic link verifications. |
Cognitive / Learning Disabilities |
https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-enhanced.html |
WCAG 2.2 |
Forms, Security |
Strict Authentication, Zero Cognitive Tests, Biometric Login Alternatives |
| 4.1.2 |
Level A |
Robust |
4.1.2-Name, Role, Value |
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically determined; and notification of changes to these items is available to user agents, including assistive technologies. |
F59: Failure due to developing custom interactive button elements or tab controls out of plain static `<div>` or `<span>` tags without adding matching ARIA roles or focus state management. ; F79: Failure due to binding interactive state toggles (like expanding list panels) without dynamically modifying attributes like `aria-expanded=”true/false”`. |
H91, ARIA4, ARIA5 Use native interactive HTML elements (<button>, <a>, <select>) to guarantee base tree exposure; apply correct ARIA attributes (role=”tab”, aria-expanded=”true”) when writing custom widgets. |
Screen Reader Users, Switch Access Users, Motor Impairments |
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html |
WCAG 2.2 |
UI Components, ARIA |
ARIA Attributes, Custom Controls, Accessibility Tree, Component States |
| 4.1.3 |
Level AA |
Robust |
4.1.3-Status Messages |
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. |
F103: Failure due to rendering dynamic “Success” banners or text alerts on a display workspace without wrapping them in appropriate live region containers (like `role=”status”` or `aria-live=”polite”`). |
ARIA19 Wrap dynamic interface feedback strings within container blocks styled with explicit ARIA live regions (role=”status”, role=”log”, or aria-live=”polite”) to announce text logs automatically. |
Screen Reader Users, Low Vision Users |
https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html |
WCAG 2.2 |
Forms, ARIA |
Live Regions, Dynamic Alerts, Aria Status, Background Updates |
| 1.1.1 |
A |
1.1 Text Alternatives |
1.1.1-Non-text Content |
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for specific situations like controls, media, tests, or pure decoration. |
F3 Failure due to using CSS to include images that convey important information, F65 Failure due to omitting the alt attribute on img elements. |
G94 Provide descriptive alt text for informative images, H67 use alt=”” for decorative images. |
Screen Reader Users, Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#non-text-content |
WCAG 2.1 |
Screen reader |
Alternate Text on Images, Decorative Images, Time-Based Media, CAPTCHAs, UI Elements Have Names |
| 1.2.1 |
A |
1.2 Time-based Media |
1.2.1-Audio-only and Video-only (Prerecorded) |
For prerecorded audio-only or prerecorded video-only media, an alternative for time-based media or an audio description is provided. |
F69 Failure due to omitting time-based media alternatives for audio-only or video-only tracks. |
G158 Provide a full text transcript for prerecorded audio-only media. |
Blindness, Low Vision, Deafness, Hard of Hearing |
https://www.w3.org/TR/WCAG21/#audio-only-and-video-only-prerecorded |
WCAG 2.1 |
Screen reader |
NaN |
| 1.2.2 |
A |
1.2 Time-based Media |
1.2.2-Captions (Prerecorded) |
Captions are provided for all prerecorded audio content in synchronized media. |
F8 Failure due to captions omitting important information. |
G93, H95 Provide synchronized captions for all prerecorded audio using formats like WebVTT. |
Deafness, Hard of Hearing |
https://www.w3.org/TR/WCAG21/#captions-prerecorded |
WCAG 2.1 |
Multimedia |
captions, synchronized, audio, prerecorded |
| 1.2.3 |
A |
1.2 Time-based Media |
1.2.3-Audio Description or Media Alternative (Prerecorded) |
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media. |
F69 Failure due to omitting time-based media alternatives. |
G69, G58 Provide a descriptive text transcript or an audio description track. |
Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#audio-description-or-media-alternative-prerecorded |
WCAG 2.1 |
Multimedia |
audio description, transcript, synchronized |
| 1.2.4 |
AA |
1.2 Time-based Media |
1.2.4-Captions (Live) |
Captions are provided for all live audio content in synchronized media. |
F73 Failure due to live captions dropping critical indicators. |
G9, G87 Use real-time captioning services (CART). |
Deafness, Hard of Hearing |
https://www.w3.org/TR/WCAG21/#captions-live |
WCAG 2.1 |
Multimedia |
live captions, real-time, streaming |
| 1.2.5 |
AA |
1.2 Time-based Media |
1.2.5-Audio Description (Prerecorded) |
Audio description is provided for all prerecorded video content in synchronized media. |
F78 Failure due to omitting audio descriptions when visual updates occur. |
G173, H96 Embed a dedicated descriptive audio narration track. |
Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#audio-description-prerecorded |
WCAG 2.1 |
Multimedia |
audio description, narration, prerecorded |
| 1.2.6 |
AAA |
1.2 Time-based Media |
1.2.6-Sign Language (Prerecorded) |
Sign language interpretation is provided for all prerecorded audio content in synchronized media. |
F74 Failure due to synchronized media alternatives lacking sign translation overlays. |
G54 Embed a synchronized sign language interpreter video layer. |
Deafness, Native Sign Language Users |
https://www.w3.org/TR/WCAG21/#sign-language-prerecorded |
WCAG 2.1 |
Multimedia |
sign language, video, synchronization |
| 1.2.7 |
AAA |
1.2 Time-based Media |
1.2.7-Extended Audio Description (Prerecorded) |
Where pauses in foreground audio are insufficient, an extended audio description is provided for all prerecorded video content. |
F78 Failure due to missing audio context when speech gaps are too short. |
G8 Provide extended audio descriptions by programmatically pausing the video playback loop. |
Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#extended-audio-description-prerecorded |
WCAG 2.1 |
Multimedia |
audio description, video pauses, narration |
| 1.2.8 |
AAA |
1.2 Time-based Media |
1.2.8-Media Alternative (Prerecorded) |
An alternative for time-based media is provided for all prerecorded synchronized media and video-only media. |
F69 Failure due to omitting comprehensive text transcripts. |
G158, G69 Write an exhaustive narrative text transcript logging all dialogue and action. |
Blindness, Deafness, Hard of Hearing, Cognitive |
https://www.w3.org/TR/WCAG21/#media-alternative-prerecorded |
WCAG 2.1 |
Multimedia |
transcripts, textual media, documentation |
| 1.2.9 |
AAA |
1.2 Time-based Media |
1.2.9-Audio-only (Live) |
An alternative for time-based media that presents equivalent information for live audio-only content is provided. |
F73 Failure due to live broadcast streaming audio lacking a synchronized textual feed. |
G151 Provide a continuous, real-time updated text transcript feed. |
Deafness, Hard of Hearing |
https://www.w3.org/TR/WCAG21/#audio-only-live |
WCAG 2.1 |
Multimedia |
live audio, transcripts, streaming feeds |
| 1.3.1 |
A |
1.3 Adaptable |
1.3.1-Info and Relationships |
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
F2 Failure due to using structural markup incorrectly, F43 Failure due to using structural markup for visual layout only. |
G115 Use semantic HTML tags properly: headings (<h1>-<h6>), lists, and data tables with scope. |
Screen Reader Users, Blindness, Motor, Cognitive |
https://www.w3.org/TR/WCAG21/#info-and-relationships |
WCAG 2.1 |
Structure, Forms, Tables |
semantics, tables, lists, headings, forms |
| 1.3.2 |
A |
1.3 Adaptable |
1.3.2-Meaningful Sequence |
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. |
F1 Failure due to structural layout changes masking the base HTML text flow. |
G57, C27 Ensure the underlying DOM code order matches the logical, meaningful visual reading order. |
Screen Reader Users, Blindness, Reading Disabilities |
https://www.w3.org/TR/WCAG21/#meaningful-sequence |
WCAG 2.1 |
Structure, Layout |
dom order, reading order, layout sequence |
| 1.3.3 |
A |
1.3 Adaptable |
1.3.3-Sensory Characteristics |
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, position, or sound. |
F14 Failure due to relying on color markers alone, F26 Failure due to instructions referencing spatial layout. |
G96 Include clear textual descriptions alongside any sensory cues in instructions. |
Blindness, Low Vision, Color Blindness, Deafness |
https://www.w3.org/TR/WCAG21/#sensory-characteristics |
WCAG 2.1 |
Design, Instructions |
sensory cues, color, shape, instructions |
| 1.3.4 |
AA |
1.3 Adaptable |
1.3.4-Orientation |
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless essential. |
F97 Failure due to locking viewport layout parameters, F104 Failure due to hardcoding absolute layout dimensions. |
G214 Avoid hardcoding orientation blocks in CSS; use fluid layouts and media queries. |
Motor, Low Vision, Fixed Display Users |
https://www.w3.org/TR/WCAG21/#orientation |
WCAG 2.1 |
Layout, Mobile |
orientation, portrait, landscape, responsive |
| 1.3.5 |
AA |
1.3 Adaptable |
1.3.5-Identify Input Purpose |
The purpose of each input field collecting information about the user can be programmatically determined when utilizing common data types. |
F107 Failure due to structural input identifiers lacking generic browser metadata mappings. |
H98 Add valid native autocomplete attributes (e.g., autocomplete=”given-name”). |
Cognitive, Motor, Dyslexia |
https://www.w3.org/TR/WCAG21/#identify-input-purpose |
WCAG 2.1 |
Forms, Input |
forms, autocomplete, input purpose |
| 1.4.1 |
A |
1.4 Distinguishable |
1.4.1-Use of Color |
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing an element. |
F13 Failure due to link status updates executing exclusively via color shifts. |
G14 Supplement color changes with text indicators, underlines for inline links, or distinct patterns. |
Color Blindness, Low Vision, Blindness |
https://www.w3.org/TR/WCAG21/#use-of-color |
WCAG 2.1 |
Design, Color |
color, links, indicators, states |
| 1.4.2 |
A |
1.4 Distinguishable |
1.4.2-Audio Control |
If any audio plays automatically for more than 3 seconds, a mechanism is available to pause, stop, or control volume independently from the system. |
F23 Failure due to background media streams locking keyboard focus when running automatically. |
G60, G170 Avoid autoplay entirely, or add an easily discoverable control component at the top of the page. |
Screen Reader Users, Cognitive, Attention Deficit |
https://www.w3.org/TR/WCAG21/#audio-control |
WCAG 2.1 |
Multimedia, Audio |
autoplay, media controls, audio interference |
| 1.4.3 |
AA |
1.4 Distinguishable |
1.4.3-Contrast (Minimum) |
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text (3:1), incidental text, or logotypes. |
F24 Failure due to element text components falling below minimum ratio thresholds against backgrounds. |
G18, G148 Select foreground/background colors that meet minimum contrast metrics (at least 4.5:1 for body text). |
Low Vision, Color Blindness, Aging Eyes |
https://www.w3.org/TR/WCAG21/#contrast-minimum |
WCAG 2.1 |
Design, Contrast |
color contrast, text size, readability, styles |
| 1.4.4 |
AA |
1.4 Distinguishable |
1.4.4-Resize Text |
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. |
F80 Failure due to layout truncations clipping text blocks when browser scale is modified. |
G142, C28 Use relative CSS font units (rem, em) instead of absolute pixels, and style layouts using fluid grids. |
Low Vision, Presbyopia |
https://www.w3.org/TR/WCAG21/#resize-text |
WCAG 2.1 |
Layout, Text |
text zoom, relative units, responsiveness |
| 1.4.5 |
AA |
1.4 Distinguishable |
1.4.5-Images of Text |
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. |
F30 Failure due to hardcoding typography straight into structural graphic assets. |
G140, C30 Render structural typography using semantic HTML layouts and CSS styling instead of bitmap images. |
Low Vision, Screen Reader Users, Learning Disabilities |
https://www.w3.org/TR/WCAG21/#images-of-text |
WCAG 2.1 |
Images, Text |
images of text, custom fonts, typography |
| 1.4.6 |
AAA |
1.4 Distinguishable |
1.4.6-Contrast (Enhanced) |
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for large text (4.5:1), incidental text, or logotypes. |
F24 Failure due to enhanced typographic layouts falling below a 7:1 color contrast metric threshold. |
G17, G18 Select foreground and background color combinations that explicitly maintain a 7:1 contrast ratio. |
Low Vision, Color Blindness, Aging Eyes |
https://www.w3.org/TR/WCAG21/#contrast-enhanced |
WCAG 2.1 |
Design, Contrast |
enhanced contrast, color choice, deep readability |
| 1.4.7 |
AAA |
1.4 Distinguishable |
1.4.7-Low or No Background Audio |
For prerecorded audio-only containing primarily speech, background sounds are absent or at least 20 decibels lower than the foreground speech. |
F93 Failure due to background audio accompaniment drowning out spoken informational tracks. |
G56 Master audio files so background music is omitted, or damp background noises down by at least 20 decibels. |
Hard of Hearing, Cognitive, Attention Deficit |
https://www.w3.org/TR/WCAG21/#low-or-no-background-audio |
WCAG 2.1 |
Multimedia, Audio |
audio levels, background noise, volume balance |
| 1.4.8 |
AAA |
1.4 Distinguishable |
1.4.8-Visual Presentation |
A mechanism is available to choose colors, width is under 80 characters, text is not justified, line spacing is at least 1.5, and text scales to 200%. |
F88 Failure due to forced text justification settings or locking layout column boundaries past 80 characters. |
G148, G156 Code liquid presentation styles that allow font changes and restrict paragraph spans to 80 characters. |
Cognitive, Dyslexia, Low Vision, Reading Disabilities |
https://www.w3.org/TR/WCAG21/#visual-presentation |
WCAG 2.1 |
Layout, Text |
visual layout, layout wrapping, typography blocks |
| 1.4.9 |
AAA |
1.4 Distinguishable |
1.4.9-Images of Text (No Exception) |
Images of text are only used for pure decoration or where a particular presentation of text is essential. |
F30 Failure due to utilizing embedded text imagery for non-essential visual brand components. |
G140 Maximize native CSS web fonts and raw structural HTML text markup blocks to completely avoid images of text. |
Low Vision, Screen Reader Users, Cognitive |
https://www.w3.org/TR/WCAG21/#images-of-text-no-exception |
WCAG 2.1 |
Images, Text |
text imagery, typography assets, branding |
| 1.4.10 |
AA |
1.4 Distinguishable |
1.4.10-Reflow |
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions down to 320 CSS pixels wide. |
F102 Failure due to layout templates forcing 2D scrolling behavior when assets render at 320px dimensions. |
G206 Apply adaptive CSS grid/flexbox components, responsive breakpoints, and max-width fluid configurations. |
Low Vision, Severe Hyperopia, Cognitive |
https://www.w3.org/TR/WCAG21/#reflow |
WCAG 2.1 |
Layout, Responsive |
reflow, responsive, zoom, horizontal scroll |
| 1.4.11 |
AA |
1.4 Distinguishable |
1.4.11-Non-text Contrast |
The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1 against adjacent colors. |
F108 Failure due to interface component outlines tracking below a 3:1 contrast ratio against surrounding fields. |
G195, G207 Style input boundaries, interactive buttons, focus ring states, and infographics to retain at least a 3:1 ratio. |
Low Vision, Color Blindness |
https://www.w3.org/TR/WCAG21/#non-text-contrast |
WCAG 2.1 |
Design, Contrast |
non-text contrast, borders, states, graphical icons |
| 1.4.12 |
AA |
1.4 Distinguishable |
1.4.12-Text Spacing |
No loss of content or functionality occurs by setting specific paragraph, line, word, and letter spacing boundaries within markup languages. |
F106 Failure due to layout elements overflowing or clipping structural text lines when styles override cell margins. |
G148 Provide layout switches or G156 clean liquid styles that adapt fluidly to font override tools. |
Low Vision, Dyslexia, Cognitive Overload |
https://www.w3.org/TR/WCAG21/#text-spacing |
WCAG 2.1 |
Layout, Text |
text spacing, line height, font styles, clipping text |
| 1.4.13 |
AA |
1.4 Distinguishable |
1.4.13-Content on Hover or Focus |
Where hover or focus triggers additional content to become visible, the content is dismissible, hoverable, and persistent. |
F109 Failure due to dynamic overlay content closing automatically before user pointer trajectories traverse boundaries. |
G211 Ensure popups/tooltips can be hidden with Escape, allow the pointer to travel over popup content, and keep it persistent. |
Low Vision, Motor, Screen Magnifier Users |
https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus |
WCAG 2.1 |
UI Components, Popups |
tooltips, popups, hover states, focus management |
| 2.1.1 |
A |
2.1 Keyboard Accessible |
2.1.1-Keyboard |
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. |
F42 Failure due to using scripting on an element without making it keyboard accessible, F54 Failure due to using incorrect markup. |
G90 Bind native element hooks or map standardized event listeners to execute logic via standard keys like Enter and Spacebar. |
Keyboard Only Users, Blindness, Motor |
https://www.w3.org/TR/WCAG21/#keyboard |
WCAG 2.1 |
Interactivity, Keyboard |
keyboard accessibility, interactive controls, focus |
| 2.1.2 |
A |
2.1 Keyboard Accessible |
2.1.2-No Keyboard Trap |
If keyboard focus can be moved to a component using a keyboard interface, then focus can be moved away from that component using only a keyboard interface. |
F10 Failure due to trapping keyboard focus within a plugin, applet, or embedded application context layer. |
G21 Ensure modal script dialogs or complex rich app views close or return context properly without trapping focus. |
Keyboard Only Users, Blindness, Motor |
https://www.w3.org/TR/WCAG21/#no-keyboard-trap |
WCAG 2.1 |
Interactivity, Keyboard |
keyboard trap, modal dialogs, focus management |
| 2.1.3 |
AAA |
2.1 Keyboard Accessible |
2.1.3-Keyboard (No Exception) |
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. |
F42 Failure due to leaving interactive element functionalities dependent on specialized analog swipe speeds or path paths. |
G90 Establish comprehensive, pure keyboard listener interactions for every single interactive feature across the DOM grid. |
Keyboard Only Users, Blindness, Severe Motor Tremors |
https://www.w3.org/TR/WCAG21/#keyboard-no-exception |
WCAG 2.1 |
Interactivity, Keyboard |
total keyboard control, no mouse tracking, interface hooks |
| 2.1.4 |
A |
2.1 Keyboard Accessible |
2.1.4-Character Key Shortcuts |
If a keyboard shortcut is implemented using only letter, punctuation, number, or symbol characters, then the shortcut can be turned off or remapped. |
F95 Failure due to mapping universal character-key hotkeys that cannot be globally deactivated or customized. |
G217 Provide an accessible framework that lets users clear or remap hotkeys, or confine hotkeys to active component focus bounds. |
Speech Recognition Users, Screen Reader Users, Motor |
https://www.w3.org/TR/WCAG21/#character-key-shortcuts |
WCAG 2.1 |
Interactivity, Keyboard |
keyboard shortcuts, hotkeys, speech input, character keys |
| 2.2.1 |
A |
2.2 Enough Time |
2.2.1-Timing Adjustable |
For each time limit set by the content, the user is allowed to turn off, adjust, or extend the limit before it occurs, with minimal exceptions. |
F58 Failure due to content refresh loops running without an interactive mechanism to change time thresholds. |
G198 Build functional warning dialog boxes that alert users before expiration, offering a simple mechanism to extend. |
Cognitive, Low Vision, Motor, Reading Disabilities |
https://www.w3.org/TR/WCAG21/#timing-adjustable |
WCAG 2.1 |
Interactivity, Session |
time limits, session timeout, overlays, warnings |
| 2.2.2 |
A |
2.2 Enough Time |
2.2.2-Pause, Stop, Hide |
For moving, blinking, scrolling, or auto-updating information that starts automatically and lasts more than five seconds, a stop mechanism is available. |
F16 Failure due to including scrolling content that cannot be paused, F47 Failure due to using standard marquee elements. |
G186, G187 Provide prominent physical controls (like a global pause/play button) to stop looping carousels or tickers. |
Cognitive, Attention Deficit, Low Vision, Screen Reader Users |
https://www.w3.org/TR/WCAG21/#pause-stop-hide |
WCAG 2.1 |
Layout, Multimedia |
carousels, animations, auto-update, scrolling text |
| 2.2.3 |
AAA |
2.2 Enough Time |
2.2.3-No Timing |
Timing is not an essential part of the activity or event presented by the content, except for non-interactive synchronized media. |
F58 Failure due to hardcoding irreversible session timeout limits into an application configuration script. |
G5 Build transactional data pathways completely free of structural clock expirations or session time limits. |
Cognitive, Motor, Reading Disabilities |
https://www.w3.org/TR/WCAG21/#no-timing |
WCAG 2.1 |
Interactivity, Session |
zero time limits, infinite sessions, form timing exceptions |
| 2.2.4 |
AAA |
2.2 Enough Time |
2.2.4-Interruptions |
Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. |
F55 Failure due to launching automatic promotional alert modal containers that scramble active user context tracking. |
G193 Add an administrative user preference configuration to mute non-emergency data updates, popups, and notification alerts. |
Cognitive, Attention Deficit, Screen Reader Users |
https://www.w3.org/TR/WCAG21/#interruptions |
WCAG 2.1 |
Interactivity, Popups |
alert suppression, popups, modal flags, context preservation |
| 2.2.5 |
AAA |
2.2 Enough Time |
2.2.5-Re-authenticating |
When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating. |
F85 Failure due to purging unsubmitted user form data caches when an automated session expiration script triggers. |
G105 Cache unsubmitted form inputs in localized data stores during a session timeout, restoring the exact state post re-login. |
Motor, Cognitive, Dyslexia |
https://www.w3.org/TR/WCAG21/#re-authenticating |
WCAG 2.1 |
Forms, Session |
session restore, user login, cache retention, security data |
| 2.2.6 |
AAA |
2.2 Enough Time |
2.2.6-Timeouts |
Users are warned of duration of any user inactivity that could result in data loss, unless the data is preserved for more than 20 hours. |
F58 Failure due to executing an unannounced session timeout state swap that wipes text inputs. |
G212 State inactivity expiration terms early in the process flow, specifying the exact minute limits explicitly before usage begins. |
Cognitive, Motor, Blindness |
https://www.w3.org/TR/WCAG21/#timeouts |
WCAG 2.1 |
Interactivity, Session |
inactivity markers, timing thresholds, transparency statements |
| 2.3.1 |
A |
2.3 Seizures and Physical Reactions |
2.3.1-Three Flashes or Below Threshold |
Web pages do not contain anything that flashes more than three times in any one-second period, or the flash is below thresholds. |
F49 Failure due to using visual layouts or flickering media streams that violate flash frequency limits. |
G19 Audit media streams to guarantee visual animation cycles do not flash greater than 3x in a one-second range. |
Photosensitive Epilepsy, Seizure Disorders |
https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold |
WCAG 2.1 |
Multimedia, Design |
flashing, seizures, animation, visual thresholds |
| 2.3.2 |
AAA |
2.3 Seizures and Physical Reactions |
2.3.2-Three Flashes |
Web pages do not contain anything that flashes more than three times in any one-second period. |
F49 Failure due to running visual site animations that flash more than 3 times a second, completely disregarding size. |
G19 Strip all high-frequency blinking loops or raw layout flicker components out of design models completely. |
Photosensitive Epilepsy, Neurological Conditions |
https://www.w3.org/TR/WCAG21/#three-flashes |
WCAG 2.1 |
Multimedia, Design |
animation rules, flash elimination, absolute safety bounds |
| 2.3.3 |
AAA |
2.3 Seizures and Physical Reactions |
2.3.3-Animation from Interactions |
Motion animation triggered by interaction can be disabled, unless the animation is essential to the information or activity. |
F103 Failure due to executing canvas parallax transitions or layout sliding movements without checking user variables. |
G214 Wrap animation loops inside a media check targeting prefers-reduced-motion: reduce, instantly bypassing motion. |
Vestibular Disorders, Motion Sickness, Cognitive |
https://www.w3.org/TR/WCAG21/#animation-from-interactions |
WCAG 2.1 |
Layout, Design |
vestibular triggers, parallax motion, layout animation overrides |
| 2.4.1 |
A |
2.4 Navigable |
2.4.1-Bypass Blocks |
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. |
F2 Failure due to missing a structural framework or skip anchor to navigate past redundant header blocks. |
G1 Implement an early keyboard-accessible “Skip to Main Content” link at the absolute top of the page DOM. |
Keyboard Only Users, Screen Reader Users, Motor |
https://www.w3.org/TR/WCAG21/#bypass-blocks |
WCAG 2.1 |
Structure, Navigation |
skip links, landmarks, bypass blocks, structural architecture |
| 2.4.2 |
A |
2.4 Navigable |
2.4.2-Page Titled |
Web pages have titles that describe topic or purpose. |
F25 Failure due to using empty, generic, or duplicated head strings across distinct tracking routes. |
G88, H25 Write clear, distinct, descriptive <title> tags for every distinct page template that specify the location. |
Screen Reader Users, Cognitive, Blindness |
https://www.w3.org/TR/WCAG21/#page-titled |
WCAG 2.1 |
Structure, Navigation |
page titles, window tabs, document descriptors, templates |
| 2.4.3 |
A |
2.4 Navigable |
2.4.3-Focus Order |
Focusable components receive focus in an order that preserves meaning and operability when navigated sequentially. |
F44 Failure due to styling tab index coordinates manually out of natural source sequence layout boundaries. |
G59, H4 Order interactive components logically inside the HTML source DOM to match the visual layout pattern. |
Keyboard Only Users, Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#focus-order |
WCAG 2.1 |
Interactivity, Keyboard |
focus order, tab sequence, DOM layout, structural patterns |
| 2.4.4 |
A |
2.4 Navigable |
2.4.4-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 context. |
F63 Failure due to using non-specific link descriptions like click here or more without containing context hooks. |
G53 Write explicit link text, or programmatically attach indicators using parent sentences or aria-describedby. |
Screen Reader Users, Blindness, Cognitive, Low Vision |
https://www.w3.org/TR/WCAG21/#link-purpose-in-context |
WCAG 2.1 |
Interactivity, Navigation |
link text, anchor tags, accessibility names, contextual strings |
| 2.4.5 |
AA |
2.4 Navigable |
2.4.5-Multiple Ways |
More than one way is available to locate a Web page within a set of Web pages except where the page is a step in a process. |
F67 Failure due to restricted, unlinked page routing models that provide only a single discovery corridor. |
G125 Provide multiple navigational pathways, combining global dropmenus with search bars or XML/HTML Sitemaps. |
Cognitive, Low Vision, Blindness, Motor |
https://www.w3.org/TR/WCAG21/#multiple-ways |
WCAG 2.1 |
Structure, Navigation |
sitemaps, search index, global navigation, user orientation |
| 2.4.6 |
AA |
2.4 Navigable |
2.4.6-Headings and Labels |
Headings and labels describe topic or purpose. |
F35 Failure due to drafting decorative heading texts or uninformative input placeholder names. |
G130, G131 Compose precise, unique visual section headings and specific form input description text. |
Cognitive, Blindness, Screen Reader Users, Low Vision |
https://www.w3.org/TR/WCAG21/#headings-and-labels |
WCAG 2.1 |
Structure, Forms |
headings, form labels, instructions, documentation clarity |
| 2.4.7 |
AA |
2.4 Navigable |
2.4.7-Focus Visible |
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. |
F78 Failure due to disabling default focus outlines using explicit CSS properties like outline none without overrides. |
G149, G165, C40 Author high-contrast CSS focus ring styles using pseudo-selectors like :focus-visible. |
Keyboard Only Users, Low Vision, Motor |
https://www.w3.org/TR/WCAG21/#focus-visible |
WCAG 2.1 |
Interactivity, Keyboard |
focus visibility, outlines, focus indicators, keyboard tracking |
| 2.4.8 |
AAA |
2.4 Navigable |
2.4.8-Location |
Information about the user’s location within a set of Web pages is available. |
F65 Failure due to nesting subpages across dynamic application pathways without rendering orientation pointers. |
G65, G128 Keep an active, interactive breadcrumb navigation trail visible near the main heading block. |
Cognitive, Learning Disabilities, Blindness |
https://www.w3.org/TR/WCAG21/#location |
WCAG 2.1 |
Structure, Navigation |
breadcrumbs, user orientation, site location maps |
| 2.4.9 |
AAA |
2.4 Navigable |
2.4.9-Link Purpose (Link Only) |
A mechanism is available to allow the purpose of each link to be identified from link text alone, with minimal exceptions. |
F63 Failure due to printing link titles like Read More that require checking neighboring sentence strings to comprehend. |
G186 Phrase anchor text descriptions comprehensively so every individual link specifies its precise destination. |
Blindness, Screen Reader Users, Cognitive |
https://www.w3.org/TR/WCAG21/#link-purpose-link-only |
WCAG 2.1 |
Interactivity, Navigation |
link descriptions, standalone anchors, independent clarity |
| 2.4.10 |
AAA |
2.4 Navigable |
2.4.10-Section Headings |
Section headings are used to organize the content. |
F2 Failure due to building long-form documentation blocks without applying descriptive structural header breaks. |
G141 Interleave structured visual heading breaks before logical content shifts to establish an organized tree. |
Cognitive, Reading Disabilities, Screen Reader Users |
https://www.w3.org/TR/WCAG21/#section-headings |
WCAG 2.1 |
Structure |
structural headers, document divisions, readability chunks |
| 2.5.1 |
A |
2.5 Input Modalities |
2.5.1-Pointer Gestures |
All functionality operating via multipoint or path gestures can be operated with a single pointer without a path-based gesture, unless essential. |
F98 Failure due to mapping dynamic functions exclusively to multi-touch pinch, swipe, or drag behaviors. |
G215 Integrate single-pointer tap/click component alternatives alongside path gestures (e.g., standalone zoom buttons). |
Motor, One-Handed Users, Alternative Pointer Users |
https://www.w3.org/TR/WCAG21/#pointer-gestures |
WCAG 2.1 |
Interactivity, Keyboard |
touch gestures, swiping, single-pointer controls, fallbacks |
| 2.5.2 |
A |
2.5 Input Modalities |
2.5.2-Pointer Cancellation |
For functionality operated via a single pointer, completions trigger on the up-event, can be aborted/undone, or are cancelable. |
F101 Failure due to triggering immediate server mutations or irreversibly executing logic strictly on down-events. |
G218 Execute operational logic on the standard pointer mouseup or click event phase to prevent accidental triggers. |
Motor, Tremor Users, Learning Disabilities |
https://www.w3.org/TR/WCAG21/#pointer-cancellation |
WCAG 2.1 |
Interactivity, Keyboard |
pointer cancellation, mouseup, click logic, execution tracking |
| 2.5.3 |
A |
2.5 Input Modalities |
2.5.3-Label in Name |
For user interface components with labels that include text, the programmatic name contains the text presented visually. |
F96 Failure due to assigning hidden ARIA string parameters that share zero typographic matches with face label text. |
G208 Align text strings embedded inside aria-label attributes to strictly contain the exact visual typography. |
Speech Recognition Users, Screen Reader Users, Cognitive |
https://www.w3.org/TR/WCAG21/#label-in-name |
WCAG 2.1 |
Layout, Navigation |
accessibility names, visible labels, aria labels, voice inputs |
| 2.5.4 |
A |
2.5 Input Modalities |
2.5.4-Motion Actuation |
Functionality operated by device or user motion can also be operated by standard UI components, and motion activation can be disabled. |
F100 Failure due to binding system logic parameters entirely to device shaking or physical camera tilts. |
G213 Provide standard interactive layout elements (like buttons) and supply configuration menus to disable motion sensors. |
Motor, Wheelchair Users, Severe Tremors |
https://www.w3.org/TR/WCAG21/#motion-actuation |
WCAG 2.1 |
Interactivity, Touch/Pointer |
motion sensors, accelerometer, gestures, device orientation |
| 2.5.5 |
AAA |
2.5 Input Modalities |
2.5.5-Target Size |
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when inline, handled by the UA, or essential. |
F102 Failure due to crowding interactive icon items into layout boxes measuring under $44 \times 44\text{px}$ footprint areas. |
G215 Enlarge active bounding element footprints or apply padding rules to guarantee a minimum touch targeting area. |
Motor, Low Dexterity, One-Handed Users, Mobile Users |
https://www.w3.org/TR/WCAG21/#target-size |
WCAG 2.1 |
Interactivity, Touch/Pointer |
touch target sizes, clickable regions, interactive icons, padding |
| 2.5.6 |
AAA |
2.5 Input Modalities |
2.5.6-Concurrent Input Mechanisms |
Web content does not restrict use of input modalities available on a platform except where essential for security or user settings. |
F99 Failure due to programmatically disabling mouse listeners or touch registers when a hardware keyboard syncs. |
G216 Structure system gesture handlers to dynamically adapt to concurrent inputs, allowing hot-swapping. |
Motor, Alternative Input Users, Dexterity Variations |
https://www.w3.org/TR/WCAG21/#concurrent-input-mechanisms |
WCAG 2.1 |
Forms, ARIA |
input modalities, hardware switching, touch restrictions |
| 3.1.1 |
A |
3.1 Readable |
3.1.1-Language of Page |
The default human language of each Web page can be programmatically determined. |
F57 Failure due to omitting the primary language attribute wrapper entirely from the document payload. |
H57 Inject a valid ISO country/language shorthand tag directly inside the primary parent container (e.g., <html lang=”en”>). |
Screen Reader Users, Cognitive, Translation Tools |
https://www.w3.org/TR/WCAG21/#language-of-page |
WCAG 2.1 |
Interactivity, Mobile |
html language, lang attribute, programmatic markup |
| 3.1.2 |
AA |
3.1 Readable |
3.1.2-Language of Parts |
The human language of each phrase or passage can be programmatically determined with standard vernacular/proper name exceptions. |
F2 Failure due to embedding localized foreign text components without declaring distinct language code attributes. |
H58 Frame localized foreign-language quotes or nested paragraph components with language markers (e.g., <span lang=”fr”>). |
Screen Reader Users, Blindness, Synthetic Speech Systems |
https://www.w3.org/TR/WCAG21/#language-of-parts |
WCAG 2.1 |
Interactivity, Touch/Pointer |
language flags, dynamic translation, semantic wrappers |
| 3.1.3 |
AAA |
3.1 Readable |
3.1.3-Unusual Words |
A mechanism is available for identifying specific definitions of words used in an unusual or restricted way, including idioms and jargon. |
F2 Failure due to publishing industry jargon expressions or technical idiom terminology without inline contextual definitions. |
G101 Provide a dedicated inline glossary component, anchor descriptive definition links, or leverage <dfn> markup. |
Cognitive, Learning Disabilities, Non-Native Speakers |
https://www.w3.org/TR/WCAG21/#unusual-words |
WCAG 2.1 |
Interactivity, Hardware |
glossary, jargon terms, definition elements, abbreviations |
| 3.1.4 |
AAA |
3.1 Readable |
3.1.4-Abbreviations |
A mechanism for identifying the expanded form or meaning of abbreviations is provided. |
F2 Failure due to introducing shorthand word strings or structural acronym abbreviations without spelling out initial context definitions. |
G102 Embed an explicit definition list tracker, map visual acronym breakdowns nearby, or anchor tags using native <abbr>. |
Cognitive, Dyslexia, Screen Reader Users |
https://www.w3.org/TR/WCAG21/#abbreviations |
WCAG 2.1 |
Interactivity, Touch/Pointer |
acronym tooltips, abbreviation tags, text expansions |
| 3.1.5 |
AAA |
3.1 Readable |
3.1.5-Reading Level |
When text requires reading ability more advanced than the lower secondary education level, a clear summary or alternative is provided. |
F2 Failure due to formatting primary instructions using highly complex prose without offering clear summary guidelines. |
G86, G153 Draft a clear plain-language overview breakdown alongside advanced literature blocks, keeping syntax straightforward. |
Cognitive, Learning Disabilities, Low Literacy |
https://www.w3.org/TR/WCAG21/#reading-level |
WCAG 2.1 |
Interactivity, Touch/Pointer |
clear summaries, lower secondary prose, readability scores |
| 3.1.6 |
AAA |
3.1 Readable |
3.1.6-Pronunciation |
A mechanism is available for identifying the specific pronunciation of words where meaning is ambiguous without it. |
F2 Failure due to using words where correct programmatic pronunciation tracking completely alters meaning without explicit guides. |
G120, G121 Publish phonetic pronunciation markers or embed an interactive audio playback sample directly next to terms. |
Blindness, Screen Reader Users, Cognitive, Dyslexia |
https://www.w3.org/TR/WCAG21/#pronunciation |
WCAG 2.1 |
Structure, Text |
phonetics, speech engines, dictionary lookup, accent definitions |
| 3.2.1 |
A |
3.2 Predictable |
3.2.1-On Focus |
When any component receives focus, it does not initiate a change of context. |
F52 Failure due to scripts executing immediate window redirects or launching popups purely from focus changes. |
G107 Restrict element focus loops to styling selection logic; verify that context shifting triggers happen via clicks. |
Keyboard Only Users, Screen Reader Users, Cognitive |
https://www.w3.org/TR/WCAG21/#on-focus |
WCAG 2.1 |
Structure, Text |
focus changes, layout triggers, form interactions, event loops |
| 3.2.2 |
A |
3.2 Predictable |
3.2.2-On Input |
Changing the setting of any component does not cause a change of context unless the user has been advised beforehand. |
F36 Failure due to launching form submittals or loading page overlays immediately upon selecting a choice inside a dropdown menu. |
G80, G13 Provide an explicit “Submit” button next to fields; explicitly warn users beforehand via visual text if needed. |
Screen Reader Users, Keyboard Only Users, Cognitive |
https://www.w3.org/TR/WCAG21/#on-input |
WCAG 2.1 |
Text, Content |
form inputs, dropdown redirection, state mutations |
| 3.2.3 |
AA |
3.2 Predictable |
3.2.3-Consistent Navigation |
Navigational mechanisms repeated on multiple pages within a set occur in the same relative order, unless initiated by the user. |
F66 Failure due to rearranging global menu string order or shifting sidebar structural components across sub-routes. |
G161 Implement universal template header/sidebar master layouts that hold identical menu strings in a matching sequence. |
Cognitive, Blindness, Screen Reader Users, Low Vision |
https://www.w3.org/TR/WCAG21/#consistent-navigation |
WCAG 2.1 |
Text, Content |
navigation order, templates, master layout, structure uniformity |
| 3.2.4 |
AA |
3.2 Predictable |
3.2.4-Consistent Identification |
Components that have the same functionality within a set of Web pages are identified consistently. |
F31 Failure due to using mismatched alternative text strings or conflicting labels for icons that hit identical endpoints. |
G197 Standardize naming conventions and alt text properties; use identical iconography for matching backend functions. |
Screen Reader Users, Cognitive, Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#consistent-identification |
WCAG 2.1 |
Text, Content |
design tokens, component reuse, labeling schemes, global icons |
| 3.2.5 |
AAA |
3.2 Predictable |
3.2.5-Change on Request |
Changes of context are initiated only by user request or a mechanism is available to turn off such changes. |
F52 Failure due to triggering immediate automated background link redirects without an absolute user click request. |
G110 Confine context changes strictly to physical user activation events, completely eliminating automated tracking alterations. |
Cognitive, Low Vision, Screen Reader Users, Blindness |
https://www.w3.org/TR/WCAG21/#change-on-request |
WCAG 2.1 |
Text, Content |
context loops, user requests, redirection configurations |
| 3.3.1 |
A |
3.3 Input Assistance |
3.3.1-Error Identification |
If an input error is automatically detected, the item in error is identified and the error is described to the user in text. |
F82 Failure due to using visual color signals or error rings exclusively to alert field input failures. |
G83, G85, H89 Generate clear inline error summary strings, link them using aria-describedby, and use role=”alert”. |
Blindness, Color Blindness, Screen Reader Users, Cognitive |
https://www.w3.org/TR/WCAG21/#error-identification |
WCAG 2.1 |
Interactivity, Behavior |
error handling, validation messages, form tracking, alerts |
| 3.3.2 |
A |
3.3 Input Assistance |
3.3.2-Labels or Instructions |
Labels or instructions are provided when content requires user input. |
F82 Failure due to mapping structural input forms without anchoring descriptive instructional strings. |
G184, H44 Pair input fields with defined visual <label> tags and include specific syntax requirements (e.g., formats). |
Cognitive, Motor, Blindness, Low Vision |
https://www.w3.org/TR/WCAG21/#labels-or-instructions |
WCAG 2.1 |
Interactivity, Behavior |
form constraints, instructional strings, field guidelines |
| 3.3.3 |
AA |
3.3 Input Assistance |
3.3.3-Error Suggestion |
If an input error is detected and suggestions for correction are known, suggestions are provided unless security is jeopardized. |
F82 Failure due to error layout templates notifying validation mistakes without rendering explicit fix parameters. |
G177, G84 Parse entries and serve remediation hints directly within the notice text block (e.g., password criteria). |
Cognitive, Learning Disabilities, Dyslexia, Blindness |
https://www.w3.org/TR/WCAG21/#error-suggestion |
WCAG 2.1 |
Structure, Navigation |
input suggestions, hint parsing, formatting rules, user recovery |
| 3.3.4 |
AA |
3.3 Input Assistance |
3.3.4-Error Prevention (Legal, Financial, Data) |
For pages causing commitments, transactions, data modifications, or test responses, submissions are reversible, checked, or confirmed. |
F82 Failure due to submitting critical transactional records immediately without allowing a revision step. |
G164, G155 Provide a final verification screen with structured edit checks, allowing users to cancel or undo actions. |
Cognitive, Motor, Tremor Users, Blindness |
https://www.w3.org/TR/WCAG21/#error-prevention-legal-financial-data |
WCAG 2.1 |
UI Components, Design |
transactions, database deletion, summaries, data safety |
| 3.3.5 |
AAA |
3.3 Input Assistance |
3.3.5-Help |
Context-sensitive help is available. |
F82 Failure due to rendering complex data forms without integrating any context-sensitive tips or assistance links. |
G89, G194 Mount dedicated interactive help links or popups directly within form labels to provide instant guidance. |
Cognitive, Learning Disabilities, Form Task Users |
https://www.w3.org/TR/WCAG21/#help |
WCAG 2.1 |
Interactivity, Behavior |
context assistance, help buttons, documentation overlays |
| 3.3.6 |
AAA |
3.3 Input Assistance |
3.3.6-Error Prevention (All) |
For Web pages that require the user to submit information, submissions are reversible, checked, or confirmed. |
F82 Failure due to executing raw database form storage pipelines without presenting a comprehensive data doublecheck phase. |
G164, G155 Mandate a final pre-submission verification grid or provide an absolute confirmation state allowing reviews. |
Cognitive, Motor, Blindness, All Users |
https://www.w3.org/TR/WCAG21/#error-prevention-all |
WCAG 2.1 |
Structure, Navigation |
verification panels, database protection, validation screens |
| 4.1.1 |
A |
4.1 Compatible |
4.1.1-Parsing |
Elements have complete start/end tags, are nested according to specification, contain no duplicate attributes, and IDs are unique. |
F70 Failure due to duplicate DOM identifier mappings, F77 Failure due to broken elements nesting out of alignments. |
G134 Validate markup strings programmatically through syntax filters and linters to assure clean structural trees. |
Screen Reader Users, Assistive Technology Parsers |
https://www.w3.org/TR/WCAG21/#parsing |
WCAG 2.1 |
Forms, Validation |
markup parsing, dom compilation, structural trees, id duplication |
| 4.1.2 |
A |
4.1 Compatible |
4.1.2-Name, Role, Value |
For all UI components, the name, role, states, properties, and values can be programmatically determined and tracked. |
F59 Failure due to using generic semantic containers to compile complex forms without attaching ARIA logic trees. |
H91, ARIA4, ARIA5 Use native interactive elements (<button>, <a>); apply correct ARIA attributes when building custom widgets. |
Screen Reader Users, Blindness, Motor |
https://www.w3.org/TR/WCAG21/#name-role-value |
WCAG 2.1 |
Forms, Input |
accessibility name, aria mapping, programmatic states, core roles |
| 4.1.3 |
AA |
4.1 Compatible |
4.1.3-Status Messages |
Status messages can be programmatically determined through roles or properties so they present without receiving focus. |
F103 Failure due to executing layout updates or printing inline notifications without passing feedback to live regions. |
ARIA19 Wrap dynamic interface feedback strings within container blocks styled with explicit live regions (role=”status”). |
Screen Reader Users, Blindness, Cognitive |
https://www.w3.org/TR/WCAG21/#status-messages |
WCAG 2.1 |
Forms, Validation |
live regions, status popups, toast notifications, feedback strings |