Overview

In October 2023 the new Web Content Accessibility Guidelines (WCAG) 2.2 was published. This updated version aims to improve the experience of three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices.

Nine new success criteria have been added, and one has been removed. It will become a legal requirement to meet the new success criteria one year after the publishing date, in October 2024.

The new success criteria are:

• Principle 2 Operable
  • 4.11 Focus not obscured (minimum) (AA)
  • 4.12 Focus not obscured (enhanced) (AAA)
  • 4.13 Focus appearance (AAA)
  • 5.7 Dragging movements (AA)
  • 5.8 Target size (minimum) (AA)
• Principle 3 Understandable
  • 3.2.6 Consistent help (A)
  • 3.7 Redundant entry (A)
  • 3.8 Accessible authentication (minimum) (AA)
  • 3.8 Accessible authentication (enhanced) (AAA)

The removed criterion is 4.1.1 Parsing. Advances in browsers and assistive technology have rendered this criteria obsolete. The problems this criteria would flag up either no longer exist, or are captured within other success criteria.

Principle 2 Operable. Criteria 4.11 and 4.12 Focus not obscured

4.11 Level AA

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

4.12 Level AAA

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

Notes

The success criteria only applies to the initial position of elements on a page. If the user has the ability to move things around, and during that process something becomes obscured, it is not considered to have failed.

An element on top of other components can pass this criteria if the user is only able to focus on the top element until it is dismissed. For example, opening a navigation menu, or a cookie banner message that must be accepted or declined before the user can continue.

Understanding these rules

These success criteria are referring to elements that can be hidden on-screen by other elements. A good example of this is a cookie banner. Some websites position their cookie banner message on top of their web pages, and this would fail this new guidance. The reason is that a user could use their keyboard, or assistive technology, to focus on something underneath the banner which is not visible. It might also make it difficult or time consuming to dismiss the banner. Any “sticky” elements, such as fixed headers or footers, or pop-up chatbots are at risk of failing this criteria, so thought needs to be given to their code markup to ensure they remain accessible.

Principle 2 Operable. Criteria 4.13 Focus appearance

4.13 Level AAA

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
• 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 and cannot be adjusted by the author, or the focus indicator and the indicator’s background colour are not modified by the author.

Understanding this rule

This new level AAA success criterion is bringing in a stricter requirement for size and colour contrast of focused states. This has been brought in to help anyone who relies on a keyboard to operate the page, by letting them visually determine what they can interact with at any point in time.

Under this new criteria the existing Government Design System pattern of a yellow background and black underline would fail because it does not extend to a perimeter of 2px outside of the element. The colour contrast would fail on a white background as it does not meet the minimum 3:1 ratio.

Principle 2 Operable. Criteria 5.7 Dragging movements

5.7 Level AA

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.

Understanding this rule

This new criterion requires than a single pointer also be provided, so that the user does not need to use a dragging motion to perform a task if they are unable to do so. For example, if there are a number of items that a user can reorganise, the inclusion of an up or down arrow which moves the element accordingly with one click would pass this criteria.

This functionality is rarely used on our websites, but needs to be considered in relation to other tools which a user might be required to use to interact with your service.

Principle 2 Operable. Criteria 5.8 Target Size

5.8 Level AA

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 centered 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

Notes

Tools such as sliders and colour pickers are considered to be one target for the purpose of the success criterion.

Understanding this rule

This level AA version of criterion 5.5 Target size (enhanced) defines a new minimum target size of at least 24px high and wide. The level AAA version requires a minimum of 44px high and wide. This means that you must be able to draw a circle of at least 24px around the element, and it must not overlap the circle around the next element.

This new criterion is to ensure that users, particularly on mobile, have enough space to be able to click an element without accidentally clicking one next to, above, or below it.

Principle 3 Understandable. Criteria 2.6 Consistent help

2.6 Level A

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

Notes

Help mechanisms may be provided directly on the page, or via a direct link to a different page containing the necessary information.

Understanding this rule

Help mechanisms are processes or techniques for achieving a result. This criterion is requiring that if help mechanisms are included, that they be included in the same visual position consistently. This helps the user to know exactly where to look for help, should they need it. For example, if a help mechanism was at the bottom left on one page, and bottom right on another, this would fail as it is not consistent.

Principle 3 Understandable. Criteria 3.7 Redundant entry

3.7 Level A

Information previously entered by or provided to the user that is required to be entered again in the same process is either:

• auto-populated
• 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
• previously entered information is no longer valid

Notes

An exception to this rule is where re-entering information is being requested for security purposes.

Understanding this rule

This criterion is to ensure that you are not asking your user for the same information multiple times.  For example, if you are asking for a delivery address and an invoice address, include a button or auto-fill mechanism so that the user can easy copy the information into the secondary fields.

Principle 3 Understandable. Criteria 3.8 and 3.9 Accessible authentication

3.8 Level AA

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

3.9 Level AAA

The enhanced level AAA version of this criterion removes the “Object recognition” and “Personal content” options.

Notes

“Object recognition” and “Personal content” may be represented by images, video or audio.

Understanding this rule

These criteria are addressing the difficulties users can experience when completing cognitive tests, for example to authenticate that they are human during a login process. The user should not need to use a second device, or solve a puzzle or maths problem to be able to continue their journey. Providing authentication via the same device or using a mechanism such as a password manager reduces the cognitive load or the user, and are the preferred approach.