What's New in WCAG 2.2 Working Draft

Introduction

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

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.

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

In WCAG 2.2, success criteria 2.4.7 Focus Visible is changed from Level AA to Level A.

To comment on the WCAG Working Draft: Please submit any comments on these new proposed success criteria by 18 September 2020. 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

Guideline 2.4 Navigable

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

2.4.11 Focus Appearance (Minimum) (AA)

For the keyboard focus indicator of each User interface component, all of the following are true:

Minimum area: The focus indication area is greater than or equal to a 1 CSS pixel border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.

Change of contrast: The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.

Adjacent contrast: The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

Unobscured: The item with focus is not entirely hidden by author-created content.

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.

If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.

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)

For the keyboard focus indicator of each User interface component, all of the following are true:

Minimum area: The focus indication area is greater than or equal to a 2 CSS pixel solid border around the control.

Change of contrast: Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.

Unobscured: 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 Fixed Reference Points (A)

When a web page or set of web pages is an electronic publication with pagebreak locators, a mechanism is available to navigate to each locator and each locator maintains its place in the flow of content, even when the formatting or platform change.

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

Understanding Fixed Reference Points

Guideline 2.5 Input Modalities

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

2.5.7 Dragging (AA)

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

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

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

2.5.8 Pointer Target Spacing (AA)

For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:

Enlarge: A mechanism is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;

Inline: The target is in a sentence or block of text;

User agent: The size of the target is controlled by the user agent and is not modified by the author;

Essential: A particular presentation of the target is essential to the information being conveyed.

This criterion has been formulated to increase the hit-area of small targets, but the group would like feedback from providers of touch-screen devices if there is another way of forming the criteria to better complement the tap-heuristics used.

Are there issues with internationalization when describing inline links?

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 Pointer Target Spacing

Guideline 3.2 Predictable

Make Web pages appear and operate in predictable ways.

3.2.6 Findable Help (A)

For single page Web applications or any set of Web pages, if one of the following is available, then access to at least one option is included in the same relative order on each page:

Human contact details;

Human contact mechanism;

Self-help option;

A fully automated contact mechanism.

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 see 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 Findable Help

3.2.7 Hidden Controls (AA)

Controls needed to progress or complete a process are visible at the time they are needed without requiring pointer hover or keyboard focus, or a mechanism is available to make them persistently visible.

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 Hidden Controls

Guideline 3.3 Input Assistance

Help users avoid and correct mistakes.

3.3.7 Accessible Authentication (A)

If an authentication process relies on a cognitive function test, at least one other method must also be available that does not rely on a 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)

For steps in a process, information previously entered by or provided to the user that is required on subsequent steps is either:

auto-populated, or

available for the user to select.

Exception: When re-entering the information is essential.

Security verification, such as repeating a password, is considered essential.

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

Editors' 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 these to the Understanding WCAG documents.