WCAG 2.2 Guidelines for Accessability
The WCAG 2.2 guidelines should be taken into account in the design and development process.
There are 13 guidelines, and their testable success criteria, divided under 4 principles: POUR (Perceivable, Operable, Understandable, and Robust).
For each guideline, there are testable success criteria categorized into the following levels:
- Level A: Lowest level (Minimum required)
- Level AA: Ideal support (Should have)
- Level AAA: Highest level (Extra)
Why Should We Care and Who Can Benefit?
Accessibility invites everyone to participate on the web:
-
Visually Impaired
Blind and low vision users rely on screen readers and keyboards. Some solutions: Apply alternative texts on images, ensure high contrast, adjustable text sizes, and focus not obscured.
-
Cognitive/Learning Impaired
People with attention limitations and short-term memory limitations. Some solutions: Employ consistent layout and navigation, use plain language, and prepopulate redundant fields on forms.
-
Motor Impaired
People who struggle with fine motor control such as tremors. Some solutions: Provide a minimum of 24x24px for target clicks, and offer alternatives to drag-and-drop features with arrows.
-
Hearing Impaired
Some solutions: Include transcripts or subtitles for audio content.
-
Everyone Else
Older people, those with a broken arm, lost glasses, on a bus, a distracted driver, with slow internet connections, etc.
In addition, it benefits the business/company:
-
Boosting SEO
Accessible websites are often better indexed by search engines.
-
Enhancing Usability and Customer Satisfaction
Improves the overall user experience, making websites easier to navigate for all users.
-
Expanding Market Reach and Sales
Reaching a broader audience increases potential market size and sales. Approximately 62,000 to 110,000 people are blind or visually impaired in the Netherlands.
-
Avoiding Lawsuits
In some regions and businesses, it's a legal requirement.
1. Perceivable
1.1 Text Alternatives
All non-text elements need to have text alternatives to maintain accessibility.
1.1.1 Non-text Content
| Level A
Input fields should have a descriptive name to make it clear to the user what needs to be filled in and what action needs to be taken (this could also mean that the user needs to make a choice).
Alt text for images should describe what is shown in the image.
There should always be a description of non-text content available for the blind/visually impaired. (If the non-text content is purely decorative, it should be implemented in such a way that it can be ignored by assistive technology)
Audio Description
Spoken text added to the audio track to describe important visual details that cannot be understood from the main audio alone.
Audio description of a video provides information about actions, characters, scene changes, on-screen text, and other visual content. With standard audio description, the spoken text is added during existing pauses in the dialogue. (See also extended audio description.) Where all video information is already provided in existing audio, no additional audio description is needed. Also called "video description."
Extended Audio Description
Audio description that is added to an audiovisual presentation by pausing the video to allow time for additional description to be added.
This technique is only used when the atmosphere of the video would be lost without the additional audio description and the pauses between dialogue/spoken text are too short.
1.2 Time-Based Media
| Level A | Level AA | Level AAA |
|---|---|---|
| Videos with pre-recorded audio must have subtitles (often already from YouTube, otherwise provided by the customer) | Subtitles for live videos | Extra |
For the blind and partially sighted, audio description is provided for pre-recorded video content.
1.3 Adaptable
| Level A | Level AA | Level AAA |
|---|---|---|
| Info and Relationships Use code to reinforce relationships and information conveyed through presentation. | Identify Input Purpose Input fields offer a way to broadly specify the intention of the input field. | Extra |
| Meaningful Sequence A correct reading sequence. | Orientation Content does not restrict its view and operation to a single display orientation, such as portrait or landscape. | |
| 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. | Reflow Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions. | |
| Non-text Contrast The visual presentation of non-text has a contrast ratio of at least 3:1 against adjacent color(s). | ||
| Content on Hover or Focus Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: dismissible, hoverable, persistent. | ||
| Text Spacing Read all the rules. |
1.4 Distinguishable
| Level A | Level AA | Level AAA |
|---|---|---|
| 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. | Contrast (Minimum) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. | Extra |
| 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. | 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. | |
| Images of Text Text is used to convey information rather than images of text. |
Reflow
Content can be displayed in two dimensions without loss of information or functionality and without having to scroll for:
Vertically scrollable content with a width equivalent to 320 CSS pixels;
Horizontally scrollable content with a height equivalent to 245 CSS pixels;
Excluding parts of the content that require a two-dimensional layout for use or meaning.
320 CSS pixels equals the initial width of a display box of 1280 CSS pixels at 400% zoom. For web content that is designed to scroll horizontally (e.g., vertical text), 256 CSS pixels equals the initial width of a display box of 1024 CSS pixels at 400% zoom. Examples of content that require a two-dimensional layout include images, maps, diagrams, videos, games, presentations, data tables, and interfaces where toolbars must remain visible while manipulating the content.
CSS Pixels
A CSS pixel is a common unit of measurement for all lengths and dimensions in CSS. This unit is density-independent and differs from the actual hardware pixels on a screen. User agents and operating systems should ensure that the CSS pixel is set as close as possible to the CSS Values and Units Module Level 3 reference pixel, which takes into account the physical dimensions of the screen and the assumed viewing distance (factors that cannot be determined by content authors).
2. Operable
2.1 Keyboard Accessibility
| Level A | Level AA | Level AAA |
|---|---|---|
| All functionality of the content is operable through a keyboard interface without requiring individual keystrokes to be timed, except when the underlying function requires input that depends on the path the user travels and not just the endpoints. | x | Extra |
| No Keyboard Trap If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface. If more than the standard arrow or tab keys or other standard methods are required to move the focus, the user is informed of how to move the focus. | ||
| Character Key Shortcuts read more below: |
Single Character Shortcuts
If a shortcut is activated using only letters (including upper and lower case), punctuation, numbers, or symbols, at least one of the following is true:
- Disable: A mechanism is available to disable the shortcut.
- Reassign: A mechanism is available to reassign the shortcut to one or more non-printing characters (e.g., Ctrl, Alt, etc.)
- Active Only When Focused: The shortcut for a user interface component is active only when that component has focus.
2.2 Enough Time
| Level A | Level AA | Level AAA |
|---|---|---|
| Timing Adjustable For each time limit that is set by the content, at least one of the following is true: turn off/adjust/extend. | x | Extra |
| Pause, Stop, Hide If auto-moving content is started that lasts longer than 5 seconds, there should be a way for the user to pause it. |
2.3 Seizures and Physical Reactions
| Level A | Level AA | Level AAA |
|---|---|---|
| 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. | x | Extra |
2.4 Navigable
| Level A | Level AA | Level AAA |
|---|---|---|
| Bypass Blocks A mechanism is available to bypass blocks of content that are repeated on multiple web pages. | 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. | Extra |
| Focus Order If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. | Focus Visible Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. | |
| 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. For example, which page the user goes to. | Focus Not Obscured When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content. |
2.5 Input Modalities
| Level A | Level AA | Level AAA |
|---|---|---|
| Pointer Gestures All functionality that uses multi-point or path-based gestures to operate can be operated with a single pointer (single tap or click, double tap and click, long press, and path-based gestures) without a path-based gesture, unless a multi-point or path-based gesture is essential. | Motion Actuation All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging. | Extra |
| Pointer Cancellation For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event/Abort or Undo/Up Reversal/Essential. | Target Size (Minimum) The size of the target for pointer inputs is at least 24 by 24 CSS pixels. | |
| Label in a Name For components with labels that contain text or images of text, the name contains the text that is visually displayed. |
3. Understandable
3.1 Readable
| Level A | Level AA | Level AAA |
|---|---|---|
| Language of the Page The default human language of each web page can be determined by software. | Language of Parts The human language of each passage or sentence in the content can be programmatically determined, except for proper names, technical terms, words from an unspecified language, and words or phrases that have become part of the jargon of the immediately surrounding text. | Extra |
3.2 Predictable
| Level A | Level AA | Level AAA |
|---|---|---|
| On Focus When any user interface component receives focus, it does not initiate a change of context. | 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. | Extra |
| On Input Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised. | Consistent Identification Components that have the same functionality within a set of web pages are identified consistently. | |
| Consistent Help If a web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple web pages within a set of web pages, they occur in the same order relative to other page content: human contact details, contact mechanism, self-help option, fully automated contact mechanism. |
3.3 Input Assistance
| Level A | Level AA | Level AAA |
|---|---|---|
| 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. | 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 the security or purpose of the content. | Extra |
| Labels or Instructions Labels or instructions are provided when content requires user input. | Error Prevention (Legal, Financial, Data) For web pages that cause legal commitments or financial transactions for the user 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/Confirmed. | |
| Redundant Entry Information previously entered by or provided to the user that is required to be entered again in the same process is either: auto-populated or available for the user to select. | Accessible Authentication (Minimum) A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following: alternative/mechanism/object recognition/personal content. |
Context Change
Significant changes in the content of web pages that, if made without the user's awareness, can disorient users who are unable to view the entire page at once.
Changes in context include changes to:
- user agent;
- display frame;
- focus;
- content that changes the meaning of the web page.
Error Prevention
- Reversible: Submissions can be undone.
- Checked: User-entered data is checked for input errors and the user is given the opportunity to correct them.
- Confirmed: A mechanism is available to review, confirm, and correct information before the submission is completed.
Context-Sensitive Help
Help text that provides information related to the function currently being performed.
Clear labels can serve as context-sensitive help.
4. Robust
Maximize compatibility with current and future user agents, including assistive technologies.
4.1 Compatible
| Level A | Level AA | Level AAA |
|---|---|---|
| Name, Role, Value For all user interface components, the name and role can be programmatically determined; states, properties, and values set by users can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. | 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. | x |
Role
Text or number that allows software to identify the function of a component within web content.
A number that indicates whether an image functions as a hyperlink, command button, or checkbox.
Name
Text that allows software to identify a component within web content to the user.
Status Message
A message that is a change in content but not a change in context and that provides information to the user about the success or results of an action, the waiting status of an application, the progress of a process, or any errors.
User Agent
Any software that retrieves and presents web content to users.
Web browsers, media players, plug-ins, and other programs—including assistive technologies—that assist in retrieving, displaying, and interacting with web content.
Assistive Technology (as used in this document)
Hardware and/or software that acts as a user agent, or in conjunction with a common user agent, to provide functionality to meet the needs of users with disabilities that goes beyond what is provided by common user agents.
Functionality provided by assistive technology includes alternative presentation formats (for example, as synthesized speech or augmented content), alternative input methods (for example, voice), additional navigation or orientation mechanisms, and content transformations (for example, to make tables more accessible).
Assistive technologies often communicate data and messages with common user agents by using and monitoring APIs.
The distinction between common user agents and assistive technologies is not absolute. Many common user agents offer a number of options to assist people with disabilities. The fundamental difference is that conventional user agents target broad and diverse audiences that typically include people with and without disabilities. Assistive technologies target narrowly defined populations of users with specific disabilities. The assistance provided by assistive technology is more specific and appropriate for the needs of the intended users. The conventional user agent can provide important functionality to assistive technologies, such as retrieving web content from programmatic objects or parsing markup into identifiable packages.
Use ARIA Roles and Landmarks
ARIA is a complex and powerful technical specification for adding accessibility information to elements that are not natively accessible. You should always use native HTML elements if they are available. Remember, the first rule of ARIA is “Don’t use ARIA.” Many features that required ARIA attributes are now implemented in HTML5.
For example:
- Use the native HTML button tag instead of the ARIA role for a button.
- Use the HTML label tag instead of aria-label or aria-labelledby.
- Use the HTML5 nav tag instead of the ARIA role for navigation.
ARIA attributes can be added to HTML in the same way that classes are loaded into HTML.
Please note that adding ARIA attributes alone is not sufficient to make most complex widgets accessible. ARIA does nothing for keyboard-only users. It is only effective for people who use assistive technology. You will still need to set up interactions and behaviors with JavaScript.
Examples of suitable ARIA usage include:
- Adding alerts to notify screen reader users of dynamic page changes, such as stock tickers and search filters.
- Making complex, interactive widgets such as date pickers accessible to screen reader users.
::: Remember: NO ARIA IS BETTER THAN BAD ARIA :::
How to Test
Automated Free Tools Testing
- Axe DevTools - a browser extension
- Lighthouse - a browser extension
Manual Testing with Screen Reader
- VoiceOver - iOS Screen Reader
- NVDA - Windows Screen Reader