WCAG 2.2 announced new guidlines. In this blog, we will go in details to learn what are the new updates, and what we have to take care.

Summary

WCAG released 2.2, in total, there are 9 new guidlines (including AA, and AAA).

Apart from 2 changes, all the success critrias in 2.0, and 2.1 are the same in 2.2.

Following are the changes in existing 2.1, and 2.2:

1. One is dropped

2. One is moved to AAA

Agenda

1. What is WCAG 2.2
2. New Success Critrias in 2.2
3. Examples
4. Resources

What is WCAG 2.2?

In the world of web accessibility, WCAG (Web Content Accessibility Guidelines) is the driving force behind creating a more inclusive online experience. While the previous version, WCAG 2.1, introduced a set of comprehensive guidelines, it's time to dive into the latest iteration: WCAG 2.2.

Before we go into the details of what's new in 2.2. Let's first understand the termnologies:

1. Guidelines: Priniciples behind accessibility

2. Success Criteria: Measurable standards for achieving accessibility

3. Conformance Rules: The rules to assess and confirm the accessibility level - A, AA, or AAA

We have A, AA, and AAA level of accessibility.

WCAG team has been hard at work over the past year, diligently crafting WCAG 2.2. At high level, they did the following notable changes:

1. Success Criteria Refinements

2. Criterion Removal

3. New Success Criteria

New Success Critrias in 2.2

1. 2.4.11 Focus Not Obscured

Official Documentaion

This guidlines fall under the "Navigation" guideline. The "Focus Not Obscured" success critria applies both for AA (2.4.11), and AAA (2.4.12) levels of accessibility.

Situation

Imagine a user is navigating a webpage using the keyboard's TAB key. While they are exploring the page by navigating from one link to another (using keyboard), they may encounter a problem that a some of the links are obscured by elements like sticky header, footer, chat/help icons, etc. This problem can make it challenging for users to determine where the content is, and where the keyboard focus is.

The "Focus Not Obscured" critira is focused on addressing this specific problem.

Acceptance

As per the AA, users should be able to partially see the link corrosponding to their current keyboard focus.This partial visibility ensures that users are aware of the link's presence beneath the obstructing element, making it more accessible.

For AAA, higher the level, higher the expecations. Users should be able to see the link completely.

Exceptions

1. If on click of a button a popover is opening then this critria can be ignored.

2. 2.4.13 Focus Appearance

Official Documentaion

This is part of Navigation guideline. In this success criteria, we need to use a focus indictor of correct size, and contrast. This is only for AAA level.

It will benefits cognitive, fine motors, and low vision.

Situation

A user is navigating a webpage and not able to tell the where the keyboard focus is.

Acceptance

A user should be able to see the keyword focus while navigating a webpage or app. The focus indicator should be

1. Is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and

2. has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states

Exceptions

1. The focus indicator is determined by the user agent and cannot be adjusted by the author, or

2. The focus indicator and the indicator's background color are not modified by the author.

3. 2.5.7 Dragging Movements

Official Documentaion

This success criteria falls under the Input Modalities guidlines. "Dragging Movements" applies online for the AA level. It benefits fine motor.

All functionality reliant on dragging movements must offer an alternative method, achievable by a single pointer without dragging. This is unless dragging is essential or determined by the user agent and unmodified by the author.

Situation

A user is exploring maps the only way to explore map is by dragging only. User is having a disability and cannot do the drag event. As a result, the user is not able to get the information from the map.

Similarly, if the user wants to adjust the price filters if the only way to do that by slider (dragging), then again this is an issue.

To solve this problem WCAG 2.2 has introduced the new success critria - "Dragging Movements"

Acceptance

Any functionality relying on dragging for its operation or interaction must provide an alternative method using a single pointer without dragging such as click event, drop down etc.

Summary

4. 2.5.8 Target Size

Official Documentaion

Target size critieria was in WCAG2.1 but for AAA. However, in WCAG 2.2 this has been introduced in AA.

The focus of this is to make the clickable sizes 24 x 24px. So, that the user won't clicked other elements by mistake

Situation

Acceptance

Example

Exceptions

4. 3.2.6 Consistent Help

Official Documentaion

Situation

Acceptance

Example

Exceptions

5. 3.3.7 Redundant Entry

Official Documentaion

Situation

Acceptance

Example

Exceptions

6. 3.3.8 Accessible Authentication

Official Documentaion

Situation

Acceptance

Example

Exceptions

Resources

https://www.w3.org/

What's next?

Re-review your applications and update to align with WCAG2.2

Credits: WC3 website

Questions? You can reach me at Twitter

Happy learning!!