This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

What's New in WCAG 2.2 Draft

Introduction, Timeline, Changes

For an introduction to Web Content Accessibility Guidelines (WCAG) and more about versions 2.0, 2.1, and 2.2, see the WCAG Overview.

WCAG 2.2 is scheduled to be completed and published by December 2022. Current versions:

The main purpose of “Candidate Recommendation” is to ensure that the standard can be implemented. It is stable at this stage; however, it could change based on implementation experience. Specifically, 2.4.11 Focus Appearance is “at risk” and might not be included in the final publication.

More about Candidate Recommendation and the process for completing WCAG 2.2 is introduced in How WAI Develops Accessibility Standards through the W3C Process.

Implementations and Comments

4 October 2022 is the deadline for implementations and comments.

We welcome examples of the new WCAG 2.2 success criteria implemented in websites and web apps. To share your implementations, please send e-mail to the Accessibility Guidelines Working Group Co-Chairs and W3C staff at: group-ag-chairs@w3.org

We hope that the normative content in WCAG 2.2 itself does not need changes. We will continue to update the Understanding documents based on feedback. To comment, please open a new issue in the WCAG GitHub repository. Create separate GitHub issues for each topic, rather than commenting on multiple topics in a single issue. If it’s not feasible for you to use GitHub, send comments in e-mail to: public-agwg-comments@w3.org

Changes from WCAG 2.1 to WCAG 2.2

All success criteria from 2.0 and 2.1 are included in 2.2. The 2.0 and 2.1 success criteria are exactly the same (verbatim, word-for-word) in 2.2. One changed level: 2.4.7 Focus Visible is changed from Level AA in WCAG 2.1 to Level A in WCAG 2.2.

The WCAG 2.2 Draft provides 9 additional success criteria from WCAG 2.1. They are included on this page.

Changes to the 2.2 Draft

Changes from the May 2021 Working Draft to the September 2022 Candidate Recommendation Draft include:

Previous changes are listed in the changelog.

Guideline 2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

2.4.11 Focus Appearance (AA)

Reporter with repetitive stress injury who doesn't use a mouse:
and Retiree with low contrast sensitivity:

  • Problem:I can't tell where the keyboard focus is as I move around a web page or app.

  • Works well:I can see where the keyboard focus is as I move around a web page or app.

WCAG:

When the keyboard focus indicator is visible, one or both of the following are true:

  1. The entire focus indicator meets all the following:
    • encloses the user interface component or sub-component that is focused, and
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.
  2. An area of the focus indicator meets all the following:
    • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Exceptions:

  • The focus indicator is determined by the user agent and cannot be adjusted by the author, or
  • The focus indicator and the indicator's background color are not modified by the author.

Note: What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.

Note: Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

Note: Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

Editor's note: This Success Criterion is at risk.

Understanding Focus Appearance

2.4.12 Focus Not Obscured (Minimum) (AA)

Reporter with repetitive stress injury who uses speech recognition software:

  • Problem:This page has a big banner that's always across the bottom. (a sticky footer) When I move focus to items, some are hidden behind the banner and I can't see them.

  • Works well:When I move focus to items, I can see them all.

WCAG:

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

Understanding Focus Not Obscured (Minimum)

2.4.13 Focus Not Obscured (Enhanced) (AAA)

Reporter with repetitive stress injury who uses speech recognition software:

  • Problem:This page has a big banner that's always across the bottom. When I move focus to items, some are hidden behind the banner and I can't see them.

  • Works well:When I move focus to items, I can see them all.

WCAG:

When a user interface component receives keyboard focus, no part of the focus indicator is hidden by author-created content.

Understanding Focus Not Obscured (Enhanced)

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.7 Dragging Movements (AA)

Retiree with hand tremor:

  • Problem:I cannot hold down the mouse button and drag it accurately enough to move the items in this list.

  • Works well:When I click on an item in the list, I get up and down arrows and I can click those to change the order.

WCAG:

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

Note: This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

Understanding Dragging Movements

2.5.8 Target Size (Minimum) (AA)

Retiree with hand tremor:

  • Problem:The buttons are so close together, I hit "Cancel" when going for "Submit". Then I have to start all over again.

  • Works well:There is more space between the buttons so I don't hit the wrong button even when I'm riding on the bumpy bus.

WCAG:

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

  • Spacing: The target offset is at least 24 CSS pixels to every adjacent target;
  • Equivalent: The function can be achieved through a different control on the same page that has an area of at least 24 by 24 CSS pixels;
  • Inline: The target is in a sentence or block of text;
  • User agent control: The size of the target is determined by the user agent and is not modified by the author;
  • Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Note: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Understanding Target Size (Minimum)

Guideline 3.2 Predictable

Make Web pages appear and operate in predictable ways.

3.2.6 Consistent Help (A)

Supermarket assistant with cognitive disabilities:

  • Problem:Whenever I use the online app to schedule my medical appointments, I can't remember what to do at each step. I've seen a Chat option in some places, but can't find it now.

  • Works well:When I need help, I can easily find the Chat option that's always in the lower right corner of the page.

WCAG:

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 relative order to other page content, unless a change is initiated by the user:

  • Human contact details;
  • Human contact mechanism;
  • Self-help option;
  • A fully automated contact mechanism.

Note: Access to help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information.

Note: For this Success Criterion, the same relative order can be thought of as how the content is ordered when the page is serialized. The visual position of a help mechanism is likely to be consistent across pages for the same page variation (e.g., CSS break-point). The user can initiate a change, such as changing the page's zoom or orientation, which may trigger a different page variation. This criterion is concerned with relative order across pages displayed in the same page variation (e.g., same zoom level and orientation).

Understanding Consistent Help

Guideline 3.3 Input Assistance

Help users avoid and correct mistakes.

3.3.7 Accessible Authentication (AA)

Supermarket assistant with cognitive disabilities:

  • Problem:I can never remember my password, it’s really hard to get into this app.

  • Works well:To get into this app, I can put my e-mail address. Then I get an e-mail message, and I can click a link in the e-mail to get into the app.

WCAG:

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
Another authentication method that does not rely on a cognitive function test.
Mechanism
A mechanism is available to assist the user in completing the cognitive function test.
Object Recognition
The cognitive function test is to recognize objects.
Personal Content
The cognitive function test is to identify non-text content the user provided to the website.

Note: Objects to recognize and user provided content may be represented by images, video, or audio.

Note: Examples of mechanisms that satisfy this criterion include:

  1. support for password entry by password managers to reduce memory need, and
  2. copy and paste to reduce the cognitive burden of re-typing.

Understanding Accessible Authentication

3.3.8 Accessible Authentication (No Exception) (AAA)

Supermarket assistant with cognitive disabilities:

  • Problem:I can never remember my password, it’s really hard to get into this app.

  • Works well:To get into this app, I can put my e-mail address. Then I get an e-mail message, and I can click a link in the e-mail to get into the app.

WCAG:

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
Another authentication method that does not rely on a cognitive function test.
Mechanism
A mechanism is available to assist the user in completing the cognitive function test.

Understanding Accessible Authentication (No Exception)

3.3.9 Redundant Entry (A)

Supermarket assistant with cognitive disabilities:

  • Problem:Whenever I use the online app to schedule my medical appointments, I have to re-type some information that I entered in a previous step.

  • Works well:The app automatically fills in information that I entered in previous steps.

WCAG:

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.

Except when:

  • re-entering the information is essential,
  • the information is required to ensure the security of the content, or
  • previously entered information is no longer valid.

Understanding Redundant Entry

About the Personas Quotes

The linked persona roles go to the Stories of Web Users. That page has other personas with different disabilities. We might add more in the future.

We plan to add persona quotes to the Understanding WCAG documents.

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.