Demystifying WCAG 2.2
Let's break down the new accessibility guidelines!
The World Wide Web Consortium released its newest version of Web Content Accessibility Guidelines. WCAG 2.2 is the newest accessibility standard for websites.
Reading the WCAG documents can be a bit overwhelming, so we’ve distilled them down to make it easy to understand the updates and check whether your sites pass the newest standards.
Accessibility standards have three levels that a site can meet. Level A is the minimum level and is a subset of Level AA, which includes additional success criteria. Level AAA includes all Level A and AA requirements, as well as additional requirements. Most companies try to meet Level AA. Here are the new requirements that have been added in WCAG 2.2, along with their accompanying level.
Consistent Help - Level A
All help items need to be in the same place on all pages throughout the site. The most common examples would be phone numbers or contact buttons. This makes it easier for users to find help, no matter what page of a site they’re on.
Exceptions
Only applies if help is available: If you don’t have a way to provide help for a user, this standard does not apply.
Can change in different viewports: It can be in different locations on mobile and desktop.
Redundant Entry - Level A
A form must either eliminate redundant inputs or provide a user with a way to populate the redundant information easily. For example, a checkout page containing a shipping address and billing address would need an option that says something like “Same as shipping info," which copies the shipping information over to the billing address so the user doesn't retype the same information twice.
Exceptions
When re-entering information is essential
Security information
Previously entered information is no longer valid
Dragging Movements - Level AA
Drag functionality must have alternative ways to move an item other than a mouse; for example, on a flow board or task board (like Github projects). The option would need to be separate from keyboard accessibility because it has to account for touchscreen devices that don’t usually have a physical keyboard.
Target Size - Level AA
Buttons or links need to have 24px by 24px around them or 24px by 24px inside of them.
The best way to think about it is to draw a circle around a target area and make sure that the circle does not overlap another button.
Does not pass
Passes
Exceptions
Inline text links
User-agent controls (Chrome/Firefox/Edge): Date pickers, select dropdown
Essential items like map pins and legal docs
You may be thinking: didn’t we already have a target size? In WCAG 2.1, they added a minimum target size of 44px by 44px for Level AAA. This new requirement adds a minimum 24px by 24px target size for Level AA.
Focus Not Obscured - Level AA and AAA
To meet level AAA, the entire component (e.g., button, link) needs to be visible when focused and can not be hidden or covered by any other elements such as sticky headers, temporary notifications, banners, etc. To meet level AA, part of the focused component (button, link) is not entirely hidden.
Meets Level AAA
Meets Level AA
Focus Appearance - Level AAA
This guideline adds an additional level for AAA that requires a focused item to have at least a 2px-thick perimeter and a color contrast ratio of at least 3:1 between the text and background.
Accessible Authentication - Level AA and AAA
To be accessible, an authentication path can’t have tasks like memorizing a password, transcribing codes or words, or solving a puzzle. Level AA does allow the use of CAPTCHAs as long as they use common objects. Level AAA does not allow CAPTCHAs at all.
There are a lot of nuances to this new rule, but the simple way to test your authentication is to check it against the cognitive function test and make sure you have 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 (not allowed for AAA).
Personal Content: The cognitive function test is to identify non-text content the user provided to the Web site (not allowed for AAA).
HTML Parsing is Being Removed
WCAG 2.2 removes the accessibility requirement that HTML passes a set of specific validation requirements.
Those removed validation requirements include:
Start or end HTML tags must exist
Tag IDs are unique
How do I know if my site passes WCAG 2.2?
An accessibility audit is a great way to determine if your site meets WCAG 2.2 requirements and to get a quote on items that may need to be updated.
Additionally, there are a few automated tools that will check your site for accessibility. Unfortunately, they can’t check complicated rules like Dragging Movements. Many accessibility rules need to be checked manually and can not be fixed with an overlay tool.
If you have some website skills, the first two (Consistent Help and Redundant Entry) requirements are relatively straightforward to fix. But requirements like Focus Not Obscured or Accessible Authentication can get pretty technical.
Making sure your site is accessible not only allows a wide range of users to access your site, it also can help protect your organization's legal standing. Hopefully, this high-level overview of the nine new accessibility items helps you understand and prioritize what needs to be fixed on your site –or implemented in your next project – to make sure your website or application is an inclusive space for everyone.
