What's New in WCAG 2.2 Working Draft

Introduction, Timeline, Comments

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 June 2022. Current drafts:

The process for completing WCAG 2.2 is introduced in How WAI Develops Accessibility Standards through the W3C Process.

Comments on the proposed new success criteria were requested by 11 June 2021. Comments submitted after that date may be addressed in the next version. To comment: Ideally open one new GitHub issue per discrete comment. If you’re not comfortable with GitHub, you can send comments 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.

WCAG 2.2 Working Draft provides 9 additional success criteria, that are included on this page.

Changes to 2.2 Working Draft

Changes from the 11 August 2020 to 11 May 2021 Working Draft include:

Guideline 2.4 Navigable

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

2.4.11 Focus Appearance (Minimum) (AA)

When user interface components receive keyboard focus, all of the following are true:

  • Contrasting area: There is an area of the focus indicator that has a contrast ratio of at least 3:1 between the colors in the focused and unfocused states.
  • Minimum area: The contrasting area is at least as large as:
    • Outline: the area of a 1 CSS pixel thick perimeter of the unfocused component, or
    • Shape: the area of a 4 CSS pixel thick line along the shortest side of a minimum bounding box of the unfocused component, and no thinner than 2 CSS pixels.
  • Adjacent contrast: The contrasting area also has a contrast ratio of least 3:1 against adjacent colors in the focused component, or the contrasting area has a thickness of at least 2 CSS pixels.
  • Not fully obscured: The item with focus is not entirely hidden by author-created content.
Note

A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.

Note

If the component has a visible boundary smaller than the hit area, or the size of the component is not available, the minimum area can be taken from the visible boundary.

Editor's note

The working group is interested in feedback about the minimum area metric, and if there are unusual scenarios where visible indicators are caught by the wording.

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.

Understanding Focus Appearance (Minimum)

2.4.12 Focus Appearance (Enhanced) (AAA)

When user interface components have keyboard focus, all of the following are true:

  • Contrasting area: There is an area of the focus indicator that has a contrast ratio of at least 4.5:1 between the colors in the focused and unfocused states.
  • Minimum area: The contrasting area is at least double the area of a 1 CSS pixel perimeter of the unfocused component;
  • Not obscured: No part of the focus indicator is hidden by author-created content.

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 easily see where the keyboard focus is as I move around a web page or app.

Understanding Focus Appearance (Enhanced)

2.4.13 Page Break Navigation (A)

For web content with page break locators, a mechanism is available to navigate to each locator.

Student with dyslexia:
and Retiree with low vision:

  • Problem:I increase the text size and spacing in the online textbook. The instructor said: "The activity is on page 37." But it's not on page 37 in my view, and I cannot find it.

  • Works well:I used the page contents list to get to "page 37". (It's actually page 53 in my view — that's OK, I found it.)

Page Break Navigation

Guideline 2.5 Input Modalities

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

2.5.7 Dragging Movements (AA)

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential.

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).

Editor's note

Is there an assistive technology that helps for people with mobility impairments? The group would like feedback on the frontier between AT & author responsibility.

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.

Understanding Dragging Movements

2.5.8 Target Size (Minimum) (AA)

Targets have an area of at least 24 by 24 CSS pixels, except where:

  • Spacing: The target offset is at least 24 CSS pixels to every adjacent target;
  • Inline: The target is in a sentence or block of text;
  • Essential: A particular presentation of the target is essential to 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.

Editor's note

Are there issues with internationalization when describing inline links?

Editor's note

Are there issues with pop-over content overlapping targets triggering failures?

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.

Understanding Target Size (Minimum)

Guideline 3.2 Predictable

Make Web pages appear and operate in predictable ways.

3.2.6 Consistent Help (A)

For each web page within a set of web pages that provides one or more of the following ways of finding help, access to at least one form of help is included in the same relative order on each page:

  • 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.

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.

Understanding Consistent Help

3.2.7 Visible Controls (AA)

Where receiving pointer hover or keyboard focus triggers user interface components to be visible, information needed to identify that user interface components are available is visible, except when:

  • The information needed to identify the user interface components is available through an equivalent component that is visible on the same page or on a different step in a multi-step process without requiring pointer hover or keyboard focus;
  • The component is provided specifically to enhance the experience for keyboard navigation;
  • A mechanism is available to make the information persistently visible;
  • Hiding the information needed to identify the component is essential.
Note

User interface components can be available through other visible components such as sub-menus, edit buttons, tabs, or thumbnails of media.

Editor's note

The working group is interested in feedback about whether there are Components determined by the user agent that should not be in scope.

Supermarket assistant with cognitive disabilities:

  • Problem:I can't tell what options are available. Some buttons appeared when I was mousing around, but now I can't find them.

  • Works well:The available buttons are all visible, without me having to mouse around.

Understanding Visible Controls

Guideline 3.3 Input Assistance

Help users avoid and correct mistakes.

3.3.7 Accessible Authentication (A)

For each step in an authentication process that relies on a cognitive function test, at least one other authentication method is available that does not rely on a cognitive function test, or a mechanism is available to assist the user in completing the cognitive function test.

Note

Examples of mechanisms include: 1) support for password entry by password managers to address the memorization cognitive function test, and 2) copy and paste to help address transcription cognitive function test.

Supermarket assistant with cognitive disabilities:

  • Problem:I don't understand what they want me to type in or click on 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.

Understanding Accessible Authentication

3.3.8 Redundant Entry (A)

Information previously entered by or provided to the user that is required to be entered again in the same process and in the same user-session 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.
Editor's note

Are there issues storing the data so a user can access it in subsequent steps?

Editor's note

Are there broader exceptions needed than essential? E.g. for mandated or required information re-entry.

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.

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