About the Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content more accessible developed primarily for people with disabilities. WCAG was developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
To minimize page bloat, I moved this content off the "Random Notes on Accessibility" page to here.
WCAG Levels of Conformance
The Web Content Accessibility Guidelines (WCAG) have three levels of conformance: A, AA, and AAA:
- Level A: The minimum level of accessibility, covering essential considerations for a broad range of users.
- Level AA: A mid-range level that offers broader access than Level A, especially for users of assistive technologies. Most organizations aim for this level.
- Level AAA: The highest level of conformance, providing accessibility for the widest range of users. However, it isn't always practical or necessary in every situation.
The WCAG document does not recommend that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA success criteria for some content.
From the University of California website
WCAG Releases
| Version | Publication Date | Details |
|---|---|---|
| WCAG 1.0 | May 5, 1999 | 14 guidelines covering basic themes of web accessibility. 65 checkpoints. Three priority levels (A, AA, AAA) |
| WCAG 2.0 | December 11, 2008 | 12 guidelines organized under four principles (i.e., perceivable, operable, understandable, and robust) and 61 success criteria. |
| WCAG 2.1 | June 5, 2018 | Backwards compatible with WCAG 2.0 and includes 17 additional success criteria covering mobile accessibility (5 new success criteria), low vision (2 new success criteria), and cognitive and learning disabilities (10 new success criteria.) |
| WCAG 2.2 | October 5, 2023 | WCAG 2.2 is backwards-compatible with WCAG 2.1 and includes 9 new Success Criteria. It has deprecated and removed the 4.1.1 success criterion (i.e., Parsing.) |
| WCAG 3.0 | unreleased | While there is a lot of overlap between 2.X and 3.0, 3.0 includes additional tests and different scoring mechanisms. As a result, 3.0 is not backwards compatible with 2.X. 3.0 does not supersede 2.2 and previous versions; rather, it is an alternative set of guidelines. Once these guidelines become a W3C Recommendation, the W3C will advise developers, content creators and policy makers to use WCAG 3.0 in order to maximize future applicability of accessibility efforts. However, content that conforms to earlier versions of WCAG continues to conform to those versions. |
WCAG Checklists
This list is not meant to be comprehensive or authoritative.
- How to Meet WCAG (Quick Reference): a customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques from W3C itself. It's authoritative and complete, but not as concise and easy to follow as other checklists.
- WebAIM's WCAG 2 Checklist from WebAIM
- WCAG Checklist: A Simplified Guide to WCAG 2.2 AA from DigitalA11Y
- WCAG 2.1 Level A And Level AA Success Criteria from ClearGov
- The Definitive Website Accessibility Checklist on the Bureau of Internet Accessibility website
All 61 Success Criteria in WCAG 2.0
| Success Criteria Number | Criteria and Explanation | Level | |
|---|---|---|---|
| 1.1 Text Alternatives | 1.1.1 | Non-text Content: Provide text alternatives for all non-text content. | A |
| 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 |
| 1.2 Time-based Media | 1.2.2 | Captions (Prerecorded): Provide captions for prerecorded audio content in synchronized media. | A |
| 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 |
| 1.2 Time-based Media | 1.2.4 | Captions (Live): Provide captions for all live audio content in synchronized media. | AA |
| 1.2 Time-based Media | 1.2.5 | Audio Description (Prerecorded): Provide audio descriptions for all prerecorded video content in synchronized media. | AA |
| 1.2 Time-based Media | 1.2.6 | Sign Language (Prerecorded): Provide sign language interpretation for prerecorded audio content. | AAA |
| 1.2 Time-based Media | 1.2.7 | Extended Audio Description (Prerecorded): Provide extended audio descriptions for all prerecorded video content. | AAA |
| 1.2 Time-based Media | 1.2.8 | Media Alternative (Prerecorded): Provide a media alternative for all prerecorded synchronized media. | AAA |
| 1.2 Time-based Media | 1.2.9 | Audio-only (Live): Provide an alternative for live audio-only content. | AAA |
| 1.3 Adaptable | 1.3.1 | Info and Relationships: Ensure relationships conveyed through presentation can be programmatically determined. | A |
| 1.3 Adaptable | 1.3.2 | Meaningful Sequence: Ensure content is presented in a meaningful order. | A |
| 1.3 Adaptable | 1.3.3 | Sensory Characteristics: Ensure instructions do not rely solely on sensory characteristics (e.g., shape, color, size). | A |
| 1.4 Distinguishable | 1.4.1 | Use of Color: Do not use color as the only means to convey information. | A |
| 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 |
| 1.4 Distinguishable | 1.4.3 | Contrast (Minimum): Ensure text has a contrast ratio of at least 4.5:1. | AA |
| 1.4 Distinguishable | 1.4.4 | Resize Text: Text must be resizable up to 200% without loss of content or functionality. | AA |
| 1.4 Distinguishable | 1.4.5 | Images of Text: Use text rather than images of text, except for essential purposes. | AA |
| 1.4 Distinguishable | 1.4.6 | Contrast (Enhanced): Ensure text has a contrast ratio of at least 7:1. | AAA |
| 1.4 Distinguishable | 1.4.7 | Low or No Background Audio: Ensure background audio is either low or can be turned off. | AAA |
| 1.4 Distinguishable | 1.4.8 | Visual Presentation: Provide options for visual presentation of text. | AAA |
| 1.4 Distinguishable | 1.4.9 | Images of Text (No Exception): Avoid using images of text. | AAA |
| Success Criteria Number | Criteria and Explanation | Level | |
|---|---|---|---|
| 2.1 Keyboard Accessible | 2.1.1 | Keyboard: Ensure all functionality is operable through a keyboard interface. | A |
| 2.1 Keyboard Accessible | 2.1.2 | No Keyboard Trap: Ensure keyboard focus is not trapped in any part of the content. | A |
| 2.1 Keyboard Accessible | 2.1.3 | Keyboard (No Exception): All functionality must be operable using a keyboard without exceptions. | AAA |
| 2.2 Enough Time | 2.2.1 | Timing Adjustable: Allow users to adjust time limits. | A |
| 2.2 Enough Time | 2.2.2 | Pause, Stop, Hide: Provide options to pause, stop, or hide moving, blinking, or scrolling content. | A |
| 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 |
| 2.2 Enough Time | 2.2.4 | Interruptions: Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency. | 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. | AAA |
| 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 |
| 2.3 Seizures and Physical Reactions | 2.3.2 | Three Flashes: Content must not flash more than three times per second without exception. | AAA |
| 2.4 Navigable | 2.4.1 | Bypass Blocks: Provide a mechanism to bypass blocks of content that are repeated on multiple pages. | A |
| 2.4 Navigable | 2.4.2 | Page Titled: Ensure web pages have titles that describe their topic or purpose. | A |
| 2.4 Navigable | 2.4.3 | Focus Order: Ensure focusable components receive focus in a meaningful order. | A |
| 2.4 Navigable | 2.4.4 | Link Purpose (In Context): Ensure the purpose of each link can be determined from its context. | A |
| 2.4 Navigable | 2.4.5 | Multiple Ways: Provide multiple ways to locate a web page within a set of web pages. | AA |
| 2.4 Navigable | 2.4.6 | Headings and Labels: Use headings and labels to describe topic or purpose. | AA |
| 2.4 Navigable | 2.4.7 | Focus Visible: Ensure focus is visible when navigating via the keyboard. | AA |
| 2.4 Navigable | 2.4.8 | Location: Provide information about the user’s location within a set of web pages. | AAA |
| 2.4 Navigable | 2.4.9 | Link Purpose (Link Only): Ensure the purpose of each link is clear from the link text alone. | AAA |
| 2.4 Navigable | 2.4.10 | Section Headings: Use section headings to organize content. | AAA |
| Success Criteria Number | Criteria and Explanation | Level | |
|---|---|---|---|
| 3.1 Readable | 3.1.1 | Language of Page: Specify the primary language of the page. | A |
| 3.1 Readable | 3.1.2 | Language of Parts: Indicate the language of specific text passages when different from the primary language. | AA |
| 3.1 Readable | 3.1.3 | Unusual Words: Provide explanations for words that are unusual or complex. | AAA |
| 3.1 Readable | 3.1.4 | Abbreviations: Provide expansions for abbreviations. | AAA |
| 3.1 Readable | 3.1.5 | Reading Level: Provide simpler alternatives for text that is above lower secondary education level. | AAA |
| 3.1 Readable | 3.1.6 | Pronunciation: Provide pronunciation for words where meaning is ambiguous without it. | AAA |
| 3.2 Predictable | 3.2.1 | On Focus: Do not initiate a change of context when an element receives focus. | A |
| 3.2 Predictable | 3.2.2 | On Input: Do not initiate a change of context when a user inputs data. | A |
| 3.2 Predictable | 3.2.3 | Consistent Navigation: Ensure navigation is consistent across pages. | AA |
| 3.2 Predictable | 3.2.4 | Consistent Identification: Ensure components with the same functionality are consistently identified. | AA |
| 3.3 Input Assistance | 3.3.1 | Error Identification: Clearly identify input errors. | A |
| 3.3 Input Assistance | 3.3.2 | Labels or Instructions: Provide labels or instructions for user inputs. | A |
| 3.3 Input Assistance | 3.3.3 | Error Suggestion: Suggest fixes for errors when detected. | AA |
| 3.3 Input Assistance | 3.3.4 | Error Prevention (Legal, Financial, Data): Prevent or allow reversal of actions with serious consequences. | AA |
| 3.3 Input Assistance | 3.3.5 | Help: Provide context-sensitive help. | AAA |
| 3.3 Input Assistance | 3.3.6 | Error Prevention (All): Prevent or allow reversal of all user actions. | AAA |
| Success Criteria Number | Criteria and Explanation | Level | |
|---|---|---|---|
| 4.1 Compatible | 4.1.1 | Parsing: Ensure web pages are properly parsed and structured. | A |
| 4.1 Compatible | 4.1.2 | Name, Role, Value: Ensure UI components have proper names, roles, and values. | A |
17 Additional Success Criteria in WCAG 2.1
| 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 |
The 50 WCAG 2.1 Level A and Level AA Success Criteria
Meeting WCAG 2.1 Lelel A and AA is widely recognized as best practice and is often a legal mandate. For example, the American Department of Justice's final rule for Title II of the Americans with Disabilities Act mandates that state and local government websites and mobile apps must conform to WCAG 2.1 Level AA success criteria. This includes meeting all 30 Level A criteria and the 20 additional Level AA criteria.
| Success Criteria Number | Criteria and Explanation | Level | POUR Principle | Accessibility Area |
|---|---|---|---|---|
| 1.1.1 | Non-text Content – Provide text alternatives for images, icons, and other non-text content. | A | Perceivable | Visual Impairment |
| 1.2.1 | Audio-only and Video-only (Prerecorded) – Provide text transcripts or descriptions. | A | Perceivable | Hearing Impairment |
| 1.2.2 | Captions (Prerecorded) – Provide captions for prerecorded audio content in synchronized media. | A | Perceivable | Hearing Impairment |
| 1.2.3 | Audio Description or Media Alternative (Prerecorded) – Provide audio description or a text alternative. | A | Perceivable | Visual Impairment |
| 1.2.4 | Captions (Live) – Provide captions for live audio content in synchronized media. | AA | Perceivable | Hearing Impairment |
| 1.2.5 | Audio Description (Prerecorded) – Provide audio description for all prerecorded video content. | AA | Perceivable | Visual Impairment |
| 1.3.1 | Info and Relationships – Use semantic markup to convey structure and relationships. | A | Perceivable | Screen Reader, Cognitive |
| 1.3.2 | Meaningful Sequence – Present content in a logical reading and navigation order. | A | Perceivable | Screen Reader |
| 1.3.3 | Sensory Characteristics – Don't rely only on shape, color, or size to convey information. | A | Perceivable | Color Vision Deficiency |
| 1.3.4 | Orientation – Content isn't restricted to a single display orientation. | AA | Perceivable | Mobile Accessibility |
| 1.3.5 | Identify Input Purpose – Input fields have programmatically determinable purposes. | AA | Perceivable | Cognitive and Learning Disabilities |
| 1.4.1 | Use of Color – Color isn't the only visual means of conveying information. | A | Perceivable | Color Vision Deficiency |
| 1.4.2 | Audio Control – Users can pause or stop audio that plays automatically. | A | Perceivable | Hearing and Cognitive |
| 1.4.3 | Contrast (Minimum) – Text has at least 4.5:1 contrast ratio (3:1 for large text). | AA | Perceivable | Low Vision |
| 1.4.4 | Resize Text – Text can be resized up to 200% without loss of content or functionality. | AA | Perceivable | Low Vision |
| 1.4.5 | Images of Text – Use text instead of images of text except for essential cases. | AA | Perceivable | Low Vision |
| 1.4.10 | Reflow – Content reflows without loss of information when zoomed. | AA | Perceivable | Mobile Accessibility, Low Vision |
| 1.4.11 | Non-text Contrast – UI components and graphics have sufficient contrast. | AA | Perceivable | Low Vision |
| 1.4.12 | Text Spacing – No loss of content when users adjust line height, spacing, or letter spacing. | AA | Perceivable | Low Vision, Cognitive |
| 1.4.13 | Content on Hover or Focus – Hover or focus content is dismissible, hoverable, and persistent. | AA | Perceivable | Low Vision, Motor |
| 2.1.1 | Keyboard – All functionality is available from a keyboard. | A | Operable | Motor Disability |
| 2.1.2 | No Keyboard Trap – Keyboard users can navigate into and out of all components. | A | Operable | Motor Disability |
| 2.1.4 | Character Key Shortcuts – Provide a way to turn off or remap single-key shortcuts. | A | Operable | Motor and Cognitive Disabilities |
| 2.2.1 | Timing Adjustable – Allow users to extend, adjust, or turn off time limits. | A | Operable | Cognitive and Motor Disabilities |
| 2.2.2 | Pause, Stop, Hide – Provide controls for moving, blinking, or auto-updating content. | A | Operable | Cognitive and Visual |
| 2.3.1 | Three Flashes or Below Threshold – Avoid content that flashes more than three times per second. | A | Operable | Seizure Disorders |
| 2.4.1 | Bypass Blocks – Provide a way to skip repetitive content. | A | Operable | Screen Reader, Keyboard |
| 2.4.2 | Page Titled – Each page has a descriptive title. | A | Operable | Cognitive |
| 2.4.3 | Focus Order – Focus moves logically through interactive elements. | A | Operable | Keyboard, Cognitive |
| 2.4.4 | Link Purpose (In Context) – The purpose of each link can be determined from the link text or its context. | A | Operable | Cognitive |
| 2.4.5 | Multiple Ways – Provide more than one way to locate content within a site. | AA | Operable | Cognitive |
| 2.4.6 | Headings and Labels – Use clear and descriptive headings and labels. | AA | Operable | Cognitive |
| 2.4.7 | Focus Visible – The keyboard focus indicator is visible. | AA | Operable | Keyboard, Low Vision |
| 2.5.1 | Pointer Gestures – All functionality can be operated with simple gestures. | A | Operable | Motor, Mobile Accessibility |
| 2.5.2 | Pointer Cancellation – Prevent unintended actions when clicking or tapping. | A | Operable | Motor, Mobile Accessibility |
| 2.5.3 | Label in Name – Visible labels match accessible names for voice control. | A | Operable | Speech Recognition Users |
| 2.5.4 | Motion Actuation – Device motion actions can be disabled or replaced with alternatives. | A | Operable | Mobile Accessibility |
| 3.1.1 | Language of Page – The default human language of each page is programmatically defined. | A | Understandable | Screen Reader |
| 3.1.2 | Language of Parts – The human language of content parts differing from the default is identified. | AA | Understandable | Screen Reader |
| 3.2.1 | On Focus – Components do not initiate a change of context when receiving focus. | A | Understandable | Cognitive |
| 3.2.2 | On Input – Changing settings doesn't automatically cause a context change. | A | Understandable | Cognitive |
| 3.2.3 | Consistent Navigation – Navigation is presented in a consistent order across pages. | AA | Understandable | Cognitive |
| 3.2.4 | Consistent Identification – Components with the same function are identified consistently. | AA | Understandable | Cognitive |
| 3.3.1 | Error Identification – Clearly identify errors in forms or input fields. | A | Understandable | Cognitive |
| 3.3.2 | Labels or Instructions – Provide labels or instructions when input is required. | A | Understandable | Cognitive |
| 3.3.3 | Error Suggestion – Offer suggestions for correcting input errors when possible. | AA | Understandable | Cognitive |
| 3.3.4 | Error Prevention (Legal, Financial, Data) – Forms that cause serious consequences allow review, confirmation, or reversal. | AA | Understandable | Cognitive |
| 4.1.1 | Parsing – Markup can be parsed without errors that affect assistive technologies. | A | Robust | Assistive Technology Compatibility |
| 4.1.2 | Name, Role, Value – Components expose proper name, role, and state to assistive tech. | A | Robust | Assistive Technology Compatibility |
| 4.1.3 | Status Messages – Status messages are programmatically determinable. | AA | Robust | Screen Reader, Cognitive |
The 9 Additional Success Criteria in WCAG 2.2
These nine new criteria aim to improve accessibility for users with low vision (3), motor impairments (2), and cognitive disabilities (4).
| Success Criteria Number | Criteria and Explanation | Disability Category | Level |
|---|---|---|---|
| 2.4.11 | Focus Not Obscured: At least some of the element with focus is visible | Low Vision (Focus Visibility and Appearance) |
AA |
| 2.4.12 | Focus Not Obscured (Enhanced): all of the component and its focus indicator must be visible. | Low Vision (Focus Visibility and Appearance) |
AAA |
| 2.4.13 | Focus Appearance: A clearly visible "focus indicator" will show the current point of focus of the keyboard. | Low Vision (Focus Visibility and Appearance) |
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.) | Motor Impairments (User Input and Functionality) |
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. |
Motor Impairments (User Input and Functionality) |
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. | Cognitive Disabilities (Content and User Experience) |
A |
| 3.3.7 | Redundant Entry: Forms either avoid redundant entry or make it easy to reuse data already entered. | Cognitive Disabilities (Content and User Experience) |
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. | Cognitive Disabilities (Content and User Experience) |
AA |
| 3.3.9 | Accessible Authentication (Enhanced): This goes beyond 3.3.8 by prohibiting authentication methods relying on object recognition or user-provided content. | Cognitive Disabilities (Content and User Experience) |
AAA |