Web Content Accessibility Guidelines (WCAG) 2.2

A while ago we wrote about Design for accessibility concerning applications and websites. This article is the second of this series. 

We are going to delve further into this important subject and the recent update in the accessibility guidelines, called Web Content Accessibility Guidelines (WCAG) 2.2. 

We will present a pragmatic guide featuring illustrative examples to simplify the understanding of these guidelines. These guidelines are instrumental during the design phase, ensuring the creation of digital products that provide a favorable experience for all individuals.

It's worth emphasizing that both WCAG versions 2 and 2.1 are still valid.

New Features in WCAG 2.2

WCAG version 2.2 included 9 new success criteria:

2.4.11 Focus Not Obscured (Minimum) (AA)

2.4.12 Focus Not Obscured (Enhanced) (AAA)

2.4.13 Focus Appearance (AAA)

2.5.7 Dragging Movements (AA)

2.5.8 Target Size (Minimum) (AA)

3.2.6 Consistent Help (A)

3.3.7 Redundant Entry (A)

3.3.8 Accessible Authentication (Minimum) (AA)

3.3.9 Accessible Authentication (Enhanced) (AAA)

Focus indicator

2.4.11 Focus Not Obscured (Minimum) (AA)

In practice it means that the focus indicator should be:

• Not completely covered to the user
• Enclosing the entire component or sub-component
• Respecting the contrast ratio of at least 3:1 between the focus indicator and its surround elements

2.4.12 Focus Not Obscured (Enhanced) (AAA)

In practice it means that the focus should be:

• Completely visible to the user
• Enclosing the entire component or sub-component
• Respecting the contrast ratio of at least 3:1 between the focus indicator and and its surround elements

Do not use an element that covers partially or completely some components, for example, a banner, nested menu, or stick footer. Doing so is important as it can impede the visibility of the indicator when users navigate and shift their focus to specific areas.

2.4.13 Focus Appearance (AAA)

The 2.4.13 adds only one more criterion:

• The border or outer limit of the focus indicator should be at least as large as the area of a 2 px thick perimeter of the unfocused component or sub-component.

And brings 2 exceptions:

• The focus indicator is determined by the software, the system, or the browser that is accessing it.
• The focus indicator and the indicator's background color are not modified by the author

Input modalities

2.5.7 Dragging Movements (AA)

When opting for drag-and-drop method to complete an action, it is crucial to provide an alternative method using a single pointer, such as a mouse pointer, a finger interacting with a touch screen, an electronic pencil/stylus, or a laser pointer, to accomplish the same task.

There are 2 exceptions: 

• Dragging is essential
• When the functionality is determined by the software, the system, or the browser that is accessing it.

Additional: Examples of multipoint gestures include a two-finger pinch zoom, a split tap where one finger rests on the screen and a second finger taps, or a two- or three-finger tap or swipe. Users may find it difficult or impossible to accomplish these if they type and point with a single finger or stick.

2.5.8 Target Size (Minimum) (AA)

The size of clickable elements need to be a minimum of 24 x 24 px. Otherwise, it's advisable to allocate at least an equivalent space around smaller targets. If the function can be achieved in a way that fits this criterion on the same page, offering a smaller target area becomes acceptable.

This prevents missed clicks such as cancelling instead of submitting a form or selecting the wrong options in a checkbox list.

Acceptable exception:

• Hyperlink text

3.2.6 Consistent Help (A)

As we find in the fourth heuristic given by Nielsen:

Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing.

Consistency is crucial for usability, and it's even more so in the context of seeking help.

At least one of these help mechanisms need to be offered:

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

To facilitate easier identification, it's important to present them uniformly across the entire website or application.

3.3.7 Redundant Entry (A)

Sometimes the same information a user entered previously is required to be entered again, in this case, the information should be auto-populated or available to the user to select.

There are 3 exceptions:

• Re-entering the information is essential
• The information is required to ensure the security of the content
• The previously entered information is no longer valid

3.3.8 Accessible Authentication (Minimum) (AA)

Cognitive assessments are not mandatory as part of the authentication procedure. This implies that there is no necessity for the utilization of memory, attention, language, reasoning, strategic thinking, adaptability, or perceptual skills.

The alternatives are:

• Offer another type of authentication method that does not rely on a cognitive function test
• Provide a mechanism to assist the user in completing the cognitive function test
• The cognitive function test is to recognize objects.
• The cognitive function test is to identify non-text content the user provided to the Web site

3.3.9 Accessible Authentication (Enhanced) (AAA)

Same as 3.3.8, but only with 2 alternatives: 

• Offer another type of authentication method that does not rely on a cognitive function test
• Provide a mechanism to assist the user in completing the cognitive function test

Remember that disabilities encompass a spectrum, including visual, auditory, physical, speech, cognitive, language, learning, and neurological differences. While the Web Content Accessibility Guidelines (WCAG) 2.2 address a broad range of issues, there might be certain types, degrees, or combinations of disabilities not fully covered. It is crucial to understand the user base of your product to accommodate specific needs that might not be addressed in these guidelines. By doing so, we can adapt and find alternatives to enhance usability for a more inclusive experience.

Do you want to create a service or product accessible for your target? Contact us