To minimize page bloat, I moved this content off the "Random Notes on Accessibility" page to here.
For more background about WCAG, view the WCAG Releases and WCAG Checklists sections on my the "Random Notes on Accessibility" page.
| POUR Principle | Guideline | Success Criteria Number | Criteria and Explanation | Level |
|---|---|---|---|---|
| Perceivable | 1.1 Text Alternatives | 1.1.1 | Non-text Content: Provide text alternatives for all non-text content. | A |
| Perceivable | 1.2 Time-based Media | 1.2.1 | Audio-only and Video-only (Prerecorded): Provide text alternatives for prerecorded audio or video-only content. | A |
| Perceivable | 1.2 Time-based Media | 1.2.2 | Captions (Prerecorded): Provide captions for prerecorded audio content in synchronized media. | A |
| Perceivable | 1.2 Time-based Media | 1.2.3 | Audio Description or Media Alternative (Prerecorded): Provide audio descriptions or text alternatives for video-only media. | A |
| Perceivable | 1.2 Time-based Media | 1.2.4 | Captions (Live): Provide captions for all live audio content in synchronized media. | AA |
| Perceivable | 1.2 Time-based Media | 1.2.5 | Audio Description (Prerecorded): Provide audio descriptions for all prerecorded video content in synchronized media. | AA |
| Perceivable | 1.2 Time-based Media | 1.2.6 | Sign Language (Prerecorded): Provide sign language interpretation for prerecorded audio content. | AAA |
| Perceivable | 1.2 Time-based Media | 1.2.7 | Extended Audio Description (Prerecorded): Provide extended audio descriptions for all prerecorded video content. | AAA |
| Perceivable | 1.2 Time-based Media | 1.2.8 | Media Alternative (Prerecorded): Provide a media alternative for all prerecorded synchronized media. | AAA |
| Perceivable | 1.2 Time-based Media | 1.2.9 | Audio-only (Live): Provide an alternative for live audio-only content. | AAA |
| Perceivable | 1.3 Adaptable | 1.3.1 | Info and Relationships: Ensure relationships conveyed through presentation can be programmatically determined. | A |
| Perceivable | 1.3 Adaptable | 1.3.2 | Meaningful Sequence: Ensure content is presented in a meaningful order. | A |
| Perceivable | 1.3 Adaptable | 1.3.3 | Sensory Characteristics: Ensure instructions do not rely solely on sensory characteristics (e.g., shape, color, size). | A |
| Perceivable | 1.4 Distinguishable | 1.4.1 | Use of Color: Do not use color as the only means to convey information. | A |
| Perceivable | 1.4 Distinguishable | 1.4.2 | Audio Control: Provide a mechanism to stop, pause, or control audio that plays automatically for more than 3 seconds. | A |
| Perceivable | 1.4 Distinguishable | 1.4.3 | Contrast (Minimum): Ensure text has a contrast ratio of at least 4.5:1. | AA |
| Perceivable | 1.4 Distinguishable | 1.4.4 | Resize Text: Text must be resizable up to 200% without loss of content or functionality. | AA |
| Perceivable | 1.4 Distinguishable | 1.4.5 | Images of Text: Use text rather than images of text, except for essential purposes. | AA |
| Perceivable | 1.4 Distinguishable | 1.4.6 | Contrast (Enhanced): Ensure text has a contrast ratio of at least 7:1. | AAA |
| Perceivable | 1.4 Distinguishable | 1.4.7 | Low or No Background Audio: Ensure background audio is either low or can be turned off. | AAA |
| Perceivable | 1.4 Distinguishable | 1.4.8 | Visual Presentation: Provide options for visual presentation of text. | AAA |
| Perceivable | 1.4 Distinguishable | 1.4.9 | Images of Text (No Exception): Avoid using images of text. | AAA |
| Operable | 2.1 Keyboard Accessible | 2.1.1 | Keyboard: Ensure all functionality is operable through a keyboard interface. | A |
| Operable | 2.1 Keyboard Accessible | 2.1.2 | No Keyboard Trap: Ensure keyboard focus is not trapped in any part of the content. | A |
| Operable | 2.1 Keyboard Accessible | 2.1.3 | Keyboard (No Exception): All functionality must be operable using a keyboard without exceptions. | AAA |
| Operable | 2.2 Enough Time | 2.2.1 | Timing Adjustable: Allow users to adjust time limits. | A |
| Operable | 2.2 Enough Time | 2.2.2 | Pause, Stop, Hide: Provide options to pause, stop, or hide moving, blinking, or scrolling content. | A |
| Operable | 2.2 Enough Time | 2.2.3 | No Timing: Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events. | AAA |
| Operable | 2.2 Enough Time | 2.2.4 | Interruptions: Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. | AAA |
| Operable | 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. | AAA |
| Operable | 2.3 Seizures and Physical Reactions | 2.3.1 | Three Flashes or Below Threshold: Content must not flash more than three times per second. | A |
| Operable | 2.3 Seizures and Physical Reactions | 2.3.2 | Three Flashes: Content must not flash more than three times per second without exception. | AAA |
| Operable | 2.4 Navigable | 2.4.1 | Bypass Blocks: Provide a mechanism to bypass blocks of content that are repeated on multiple pages. | A |
| Operable | 2.4 Navigable | 2.4.2 | Page Titled: Ensure web pages have titles that describe their topic or purpose. | A |
| Operable | 2.4 Navigable | 2.4.3 | Focus Order: Ensure focusable components receive focus in a meaningful order. | A |
| Operable | 2.4 Navigable | 2.4.4 | Link Purpose (In Context): Ensure the purpose of each link can be determined from its context. | A |
| Operable | 2.4 Navigable | 2.4.5 | Multiple Ways: Provide multiple ways to locate a web page within a set of web pages. | AA |
| Operable | 2.4 Navigable | 2.4.6 | Headings and Labels: Use headings and labels to describe topic or purpose. | AA |
| Operable | 2.4 Navigable | 2.4.7 | Focus Visible: Ensure focus is visible when navigating via the keyboard. | AA |
| Operable | 2.4 Navigable | 2.4.8 | Location: Provide information about the user’s location within a set of web pages. | AAA |
| Operable | 2.4 Navigable | 2.4.9 | Link Purpose (Link Only): Ensure the purpose of each link is clear from the link text alone. | AAA |
| Operable | 2.4 Navigable | 2.4.10 | Section Headings: Use section headings to organize content. | AAA |
| Understandable | 3.1 Readable | 3.1.1 | Language of Page: Specify the primary language of the page. | A |
| Understandable | 3.1 Readable | 3.1.2 | Language of Parts: Indicate the language of specific text passages when different from the primary language. | AA |
| Understandable | 3.1 Readable | 3.1.3 | Unusual Words: Provide explanations for words that are unusual or complex. | AAA |
| Understandable | 3.1 Readable | 3.1.4 | Abbreviations: Provide expansions for abbreviations. | AAA |
| Understandable | 3.1 Readable | 3.1.5 | Reading Level: Provide simpler alternatives for text that is above lower secondary education level. | AAA |
| Understandable | 3.1 Readable | 3.1.6 | Pronunciation: Provide pronunciation for words where meaning is ambiguous without it. | AAA |
| Understandable | 3.2 Predictable | 3.2.1 | On Focus: Do not initiate a change of context when an element receives focus. | A |
| Understandable | 3.2 Predictable | 3.2.2 | On Input: Do not initiate a change of context when a user inputs data. | A |
| Understandable | 3.2 Predictable | 3.2.3 | Consistent Navigation: Ensure navigation is consistent across pages. | AA |
| Understandable | 3.2 Predictable | 3.2.4 | Consistent Identification: Ensure components with the same functionality are consistently identified. | AA |
| Understandable | 3.3 Input Assistance | 3.3.1 | Error Identification: Clearly identify input errors. | A |
| Understandable | 3.3 Input Assistance | 3.3.2 | Labels or Instructions: Provide labels or instructions for user inputs. | A |
| Understandable | 3.3 Input Assistance | 3.3.3 | Error Suggestion: Suggest fixes for errors when detected. | AA |
| Understandable | 3.3 Input Assistance | 3.3.4 | Error Prevention (Legal, Financial, Data): Prevent or allow reversal of actions with serious consequences. | AA |
| Understandable | 3.3 Input Assistance | 3.3.5 | Help: Provide context-sensitive help. | AAA |
| Understandable | 3.3 Input Assistance | 3.3.6 | Error Prevention (All): Prevent or allow reversal of all user actions. | AAA |
| Robust | 4.1 Compatible | 4.1.1 | Parsing: Ensure web pages are properly parsed and structured. | A |
| Robust | 4.1 Compatible | 4.1.2 | Name, Role, Value: Ensure UI components have proper names, roles, and values. | A |
| Success Criteria Number | Criteria and Explanation | Level | Accessibility Area |
|---|---|---|---|
| 1.3.4 | Orientation: Content must not restrict its view and operation to a single orientation unless essential (e.g., portrait or landscape). | AA | Mobile Accessibility |
| 1.3.5 | Identify Input Purpose: Input fields collecting user information must be programmatically determined to support personalization. | AA | Cognitive and Learning Disabilities |
| 1.4.10 | Reflow: Content must reflow within a 320 CSS pixel viewport without requiring horizontal scrolling. | AA | Low Vision |
| 1.4.11 | Non-Text Contrast: Graphical elements like buttons and icons must have sufficient contrast to be distinguishable. | AA | Low Vision |
| 1.4.12 | Text Spacing: Users must override spacing without losing content or functionality. | AA | Low Vision |
| 1.4.13 | Content on Hover or Focus: Content appearing on hover or focus must be dismissible, hoverable, and persistent. | AA | Low Vision |
| 2.1.4 | Character Key Shortcuts: Single-character shortcuts must be remappable or turnable off. | A | Mobile Accessibility |
| 2.2.6 | Timeouts: Users must be informed about time limits and given options to extend. | AAA | Cognitive and Learning Disabilities |
| 2.3.3 | Animation from Interactions: Motion animation triggered by user interaction must have a way to be disabled. | AAA | Cognitive and Learning Disabilities |
| 2.5.1 | Pointer Gestures: Complex gestures like multi-finger swipes must have simple alternatives. | A | Mobile Accessibility |
| 2.5.2 | Pointer Cancellation: Actions initiated with pointers must be cancellable to prevent accidental activation. | A | Mobile Accessibility |
| 2.5.3 | Label in Name: The accessible name for UI components must include the visible label. | A | Cognitive and Learning Disabilities |
| 2.5.4 | Motion Actuation: Functions triggered by motion (e.g., shaking) must have an alternative method. | A | Mobile Accessibility |
| 2.5.5 | Target Size: Targets must be at least 44x44 CSS pixels unless specific exceptions apply. This S.C. ensures interactive elements, like buttons or links, are big enough for most users to tap without accidentally hitting something else. However, this guideline is at the AAA level, meaning it’s not required for basic accessibility compliance (AA level) but is considered ideal for better usability. Google, on the other hand, suggests a minimum tap target size of 48x48 pixels. This is part of their design recommendations, especially for mobile devices, to improve the user experience. The slightly larger size makes elements easier to tap with fingers, which can help with mobile usability and overall navigation. |
AAA | Mobile Accessibility |
| 2.5.6 | Concurrent Input Mechanisms: Websites must support the use of multiple input methods simultaneously (e.g., keyboard and mouse). | AAA | Mobile Accessibility |
| 3.2.6 | Status Messages: Status updates must be programmatically determined without receiving focus. | AA | Cognitive and Learning Disabilities |
| Success Criteria Number | Criteria and Explanation | Level |
|---|---|---|
| 2.4.11 | Focus Not Obscured: At least some of the element with focus is visible | AA |
| 2.4.12 | Focus Not Obscured (Enhanced): all of the component and its focus indicator must be visible. | AAA |
| 2.4.13 | Focus Appearance: A clearly visible "focus indicator" will show the current point of focus of the keyboard. | AAA |
| 2.5.7 | Dragging Movements: Drag and drop must not be the only way that an action can be achieved using a single pointer (such as a mouse or a finger touch.) | AA |
| 2.5.8 | Target Size: There must be a minimum distance that two interactive elements can be away from each other to reduce the chance of people accidentally activating the wrong element. This new success criterion 2.5.8 Target Size (Minimum) will give us a AA requirement based on 24 CSS pixels. You can also still use the 2.5.5 Target Size (Enhanced) requirement based on 44 CSS pixels, which was added in WCAG 2.1 at level AAA. |
AA |
| 3.2.6 | Consistent Help: When a help feature (such as contact information or a self-help option) is available on multiple pages of a website, it must appear in the same relative place on each of the pages where it appears. | A |
| 3.3.7 | Redundant Entry: Forms either avoid redundant entry or make it easy to reuse data already entered. | A |
| 3.3.8 | Accessible Authentication: Â Authentication must be possible without such cognitive tests, for instance, by allowing users to copy and paste their password from a 3rd party password management tool. | AA |
| 3.3.9 | Accessible Authentication (Enhanced) | AAA |