Four main guideline changes are coming in WCAG 2.2’s Working Draft. Here’s your (attempted) plain English guide to what’s coming up.
IMPORTANT NOTE: Since this article was first written in early 2022, the draft specifications for WCAG 2.2 have changed. They may continue to change until they are released. Silktide has released WCAG 2.2 checks, but these are subject to change.
If you’re reading this post then I’ll assume you know what WCAG is, so we’ll skip the intro and get straight into it.
The first thing to note is that WCAG 2.2 contains everything from WCAG 2.1, word for word.
This means you don’t need to change your existing testing.
You need to be aware, however, of new success criteria which are being introduced.
What’s changed?
- There are 9 additional success criteria across four guidelines.
- One existing success criterion has changed from Level AA in WCAG 2.1 to Level A in WCAG 2.2.
Following are the new criteria along with their reference numbers.
The new criteria sit in the Navigable (2.4), Input Modalities (2.5), Predictable (3.2), and the Input Assistance (3.3) WCAG guidelines.
2.4.7 Focus Visible
When navigating with a keyboard, the element you are focused on should be visible on the screen.
For example, in the image below of the BBC News website, you can see the ‘Weather’ navigation element is clearly highlighted to indicate where the user focus is currently situated.
As you tab through the site, elements become obviously focused.
2.4.7 Focus Visible will be upgraded from a Level AA requirement in WCAG 2.2 to a Level A requirement in WCAG 2.2.
This places greater emphasis on its importance, so it is something you must implement.
2.4.11 Focus Appearance (Minimum) (AA)
A new criterion which specifies how elements should appear when focused during keyboard navigation.
It outlines requirements for:
- Contrasting area
- Minimum area
- Adjacent contrast
- Not fully obscured
Specifically, this criterion states minimum contrast requirements between the focused and unfocused states.
It also states a minimum size and shape of the contrasting area.
Finally, it ensures that any focused element is not hidden by other content created by the web author.
2.4.12 Focus appearance (Enhanced) (AAA)
This goes further than the minimum standard set out in 2.4.11, by increasing:
- the contrast ratio between focused and unfocused states and;
- the minimum size of the focused area.
Both of the Focus Appearance criteria are designed to help keyboard users navigate a web page, and be able to clearly see where they are currently focused.
Without focusing elements, it’s impossible to know where on a web page you are. This makes navigation difficult.
2.4.13 Page Break Navigation (A)
‘Paged media’ covers ebooks (like EPUB files), digital print editions of texts (including PDFs) and may also include PowerPoint presentations and similar document formats.
The aim behind this success criterion is to make page numbering accessible.
Without it, screen reader users would not be able to easily navigate to a specific page.
Also, if a user has zoomed in to a document or otherwise adapted the layout to their needs, page numbers would change relative to the actual page numbers specified in the document.
By making these accessible, and arranging programmatic ‘markers’ in the document, users will still be able to find content referenced by page numbers in the print versions of the document.
2.5.7 Dragging (AA)
Designed to help users with motor impairment, such as tremors.
It makes sure that an alternative to dragging movements, like sliders or drag-and-drop interfaces, is available.
It’s called a ‘single pointer’ mode of operation.
This means a user can still interact with the site as an alternative to dragging is provided.
2.5.8 Target Size (Minimum) (AA)
All targets must have a minimum area of at least 24 by 24 CSS pixels.
Generally, this applies to ensure that tap elements like buttons are not too small nor too close together.
This success criterion may not apply to inline targets, like text within a sentence, or where the distance between two elements is at least 24 CSS pixels to every adjacent target.
3.2.6 Consistent Help (A)
It’s important to keep contact details, help centers, and live chat widgets in a consistent relative position across all web pages in a set.
The cognitive burden in keeping, say, a live chat widget in the same position on all of your web pages, is significantly reduced.
3.2.7 Visible Controls (AA)
All user interface components, or controls, should be easily found.
Some design choices mean controls are hidden until a user interaction, like a mouseover, reveals them.
This can prevent some users from completing tasks, especially those with cognitive and learning disabilities, or people with impaired memory.
If hidden controls form part of a user journey, these users may not be able to complete that journey.
3.3.7 Accessible Authentication (A)
A new success criterion that makes it easier for users to log in.
Remembering passwords creates a cognitive burden. This criterion ensures that password manager inputs and copy/paste inputs are supported.
It also allows OAuth, WebAuthn, and 2FA.
Basically, it offers more options for built-in device functionality like facial recognition or fingerprint scanning.
Users may also input an email address and receive a login link to that email address.
Disabling the ability to paste a password into a field will result in a WCAG failure.
An alternative method for logging in must be provided that does not require a cognitive function test.
This will be a Level A requirement so is deemed of the highest importance.
3.3.8 Redundant Entry (A)
In a user journey of many steps, you shouldn’t make a user re-enter information they already provided in a previous step.
You do this by either automatically filling the information in for the user, or by allowing the user to select previously entered information.
Benefits of the proposed 2.2 update
The focus of this update is on reducing cognitive burden. All users will find these additional success criteria helpful.
Accessible authentication helps eliminate remembering passwords and prevents copy/paste and password manager functionality from being blocked.
Saving previously entered information in a stepped process reduces repetition.
Raising keyboard navigation highlighting to a Level A criteria adds more weight to its importance, while clarifying how those elements should be highlighted helps developers.
Ensuring an alternative to dragging motion helps users with motor impairments, as does making sure targets are of a minimum size.
And finally, someone has decided to mandate that PDF page numbers correspond to the page you’re actually looking at on your device.
Which helps everyone.