The W3C Accessibility Guidelines Working Group (AGWG) officially released the new Web Content Accessibility Guidelines (WCAG) version 2.2 this month.

The new standards are a great way to increase the accessibility and user experience of digital content, and we’re excited to see them adopted by businesses across Aotearoa.

We recommend you get familiar with these new success criteria early so when the New Zealand Government updates our guiding Web Accessibility Standards to include these changes, you’ll already be addressing them.

WCAG 2.2 has added nine new success criteria that benefit people with low vision, fine motor skill (dexterity) limitations, and/or cognitive challenges. While there’s still more work to be done, these new criteria are a welcome step towards creating an equitable digital experience for all.

2.4.11 — Focus not obscured (minimum)

Level AA

WCAG description:

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

How to action this:

When a component has focus, make sure at least part of it is visible within the user’s field of view.

2.4.12 — Focus not obscured (enhanced)

Level AAA

WCAG description:

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

How to action this:

When a component has focus, make sure all of it is visible within the user’s field of view.

2.4.13 — Focus appearance

Level AAA

WCAG description:

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

• is at least as large as the area of a 2 CSS pixel thick perimeter 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.

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 colour are not modified by the author.

How to action this:

Design your focus indicators to:

• be at least two pixels thick around the original component
• have a contrast ratio of 3:1 between the focused and unfocused states.

2.5.7 — Dragging movements

Level AA

WCAG description:

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.

How to action this:

When creating any dragging interactions, include a “single click” alternative such as up and down arrows.

2.5.8 — Target size (minimum)

Level AA

WCAG description:

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

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centred on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
• Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target 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.

How to action this:

Ensure there is a minimum hit area of 24 pixels by 24 pixels for all interactive elements.

3.2.6 — Consistent help

Level A

WCAG description:

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 order relative 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.

How to action this:

Make sure help components appear in the same place across all pages.

3.3.7 — Redundant entry

Level A

WCAG description:

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.

How to action this:

If a user has already provided information, either don’t ask for that information again, or allow them to select their previously entered information.

3.3.8 — Accessible authentication (minimum)

Level A

WCAG description:

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 recognise objects.
• Personal content: The cognitive function test is to identify non-text content the user provided to the Web site.

How to action this:

Design and develop alternative authenticators to passwords and puzzles.

These could include:

• an alternative to a cognitive function test
• an assistive mechanism
• an object recognition test
• a personal content test.

3.3.9 — Accessible authentication (enhanced)

Level AAA

WCAG description:

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.

How to action this:

Design and develop alternative authenticators to passwords and puzzles.

These could include:

• an alternative to a cognitive function test
• an assistive mechanism.

To meet the nine new criteria, you should:

• make sure the component that has focus is visible within the user’s field of view
• design focus appearances to be at least two pixels thick around the original component and have a contrast ratio of 3:1 between the focused and unfocused states
• include a “single click” alternative for dragging interactions
• make sure interactive elements have a minimum hit area of 24 pixels by 24 pixels
• make sure all help components appear in the same place across all pages
• avoid asking a user for information they have already provided
• create alternative authenticators to passwords and puzzles.

Our cross-discipline accessibility practitioners have a thorough understanding of all the WCAG criteria, including the nine new success criteria. Whether you are in the design phase of a new project or have a fully-functioning mature product in the market, our team can help you with accessibility reviews, in-depth audits, and practical guidance to help you meet your WCAG 2.2 obligations.

Get in touch to learn more about making your product WCAG 2.2 compliant.