What’s New in WCAG 2.2
The long-awaited WCAG 2.2 update was just officially released on October 5. It’s been five years since WCAG 2.1 came out and 15 years since WCAG 2.0 came out.
WCAG 2.2 has added nine new success criteria and removed one of them. Two of them fall under level A, four under level AA and two under AAA conformance.
Now just because WCAG 2.2 has come out doesn’t mean anything’s happened with WCAG 2.0 and 2.1. They are still valid and in use. It’s important to note that conformance to 2.2 also means conformance to 2.1 and 2.0.
New WCAG 2.2 Guidelines
These have been added at the end of each section. In the past, the success criteria were in order of level of conformance, so level A, AA then AAA. But in WCAG 2.2, the new ones are tacked onto the end of each guideline group.
That’s better than having to reorganize and renumber them all! Now that would be hard to track from WCAG 2.0 or 2.1 to 2.2!
Focus Not Obscured (AA and AAA)
Focus Not Obscured has both level AA and AAA criteria. They have to do with keyboard focus of a user interface component.
Keyboard focus is the styling that should appear when someone tabs on the keyboard to a user interface component such as a hyperlink, button, form field or search field.
The level AA criterion says that an interactive element that has focus doesn’t get completely hidden. The AAA version advises not to hide any part of the interactive element when it is in focus.
Who It Helps
Focus Not Obscured helps sighted keyboard users, who need to be able to see where they have tabbed to on a web page in order to know where to fill out a form, what hyperlink they want to activate, etc.
Examples
One example where keyboard focus might be partially or fully obscured is with cookie banners. If the cookie banner does not have to be dismissed before getting to the web page content, then it could end up partially or fully covering a hyperlink, button or form field when someone tabs to it.
Another example would be a sticky header, which stays visible when a user scrolls down the page. This could partially or fully hide an element with focus.
Focus Appearance (AAA)
Focus Appearance, which is AAA, relates to the focus indicator, which is the visual styling of an interactive element in focus.
Many designers remove it because they don’t like the look of it. (Hey, I used to do it too.)
It says that a focus indicator must have at least 3 to 1 contrast between the focused and unfocused states, so when it’s by default and when it’s in focus, when someone tabs to it on the keyboard.
It also must be at least as large as the area of a 2 CSS pixel–thick perimeter of the unfocused component.
But this does not apply if you leave the styling up to the browser or if you have not styled the focus indicator and background color.
Who It Helps
Now, again, this is a AAA guideline. That means it goes beyond what laws call for. However, it is a best practice to have a visually distinguishable focus indicator, so that sighted keyboard users can see where they have tabbed to on a web page.
Unless they know to look at the lower lefthand corner of a web page where the URL that appears, it’s a bit like playing Whac-a-Mole on the page. (Maybe Russian roulette is more like it, because they’re having to tab to a link and guess where it’s going to take them… .)
Example
It may sound complicated, but, really, you can do this so easily. Just give the focus indicator a 2-px outline that has sufficient contrast against any background it’s used on.
Dragging Movements (AA)
The next one is Dragging Movements, which is AA.
In short, it says that you cannot rely on dragging for a user to be able to do something. You need to provide an alternative such as clicking or tapping.
Who It Helps
This benefits people who have fine-motor issues, such as from multiple sclerosis or tremors. It also helps anyone who uses assistive technology without their hands — say, with their eyes or head.
Example
Dragging Movements immediately made me think of — and maybe you’ve seen this — the anti-spam puzzle, where you have to drag a puzzle piece into place in order to proceed.
Target Size (Minimum) (AA)
The next one is Target Size (Minimum), which is level AA. This is all about making controls easier for users.
The size of any interactive targets must be at least 24 by 24 CSS pixels or have sufficient spacing between multiple ones.
What’s all that about? It just means you want to make sure that where someone needs to select something with a mouse, pen or touch screen, that the target meets the minimum size requirements or has sufficient spacing around it so as to not cause someone to accidentally select something next to it.
Example
An example would be buttons that appear close together, where the wrong one may be selected. This can be an issue especially on mobile devices.
Accidentally selecting a Reset button on a form instead of Submit is maddening!
Who It Helps
This again helps people with fine-motor issues, like from Parkinson’s. They may find it difficult to accurately select an interactive element on a website.
Consistent Help (A)
Consistent Help is level A.
It says that if there is a help mechanism on multiple web pages, make sure it appears in a consistent location.
Who It Helps
This helps everyone, of course, like accessibility does, but specifically people with cognitive disabilities.
Example
An example of this could be live chat in the same position on every page. Usually, we find this in the lower righthand corner of a web page.
It could also be FAQs. It could also be a link to a contact form or social media platforms, a How Do I? page or a support page.
Now if only help from companies was consistent and actually good, says the person who just had a package go missing from UPS…
Redundant Entry (A)
Redundant Entry, which is level A, says that if a user has already entered information on a form and they need to enter it again, then make it available for them via auto-populating the field or by making it available for them to select.
This does not apply in certain situations such as:
- where re-entering the information is essential,
- the information is required for security purposes or
- the information that was entered before is no longer valid.
This purpose of this criterion is to help users complete multi-step processes in a single session.
Example
For example, you may have encountered a checkout page with a form that has a checkbox to confirm if the shipping address is the same as your billing address. So you wouldn’t have to enter in all the same information again if that information is the same.
Who It Helps
This helps users who have learning or cognitive issues and find it hard to recall information. It also benefits people with mobility issues, so that they don’t have to re-enter information they’ve already provided.
Accessible Authentication (AA and AAA)
Accessible Authentication has both level AA and AAA criteria.
For AA, it says don’t force users to complete a cognitive function test, such as remembering a password or solving a puzzle, for any step in an authentication process. That is, unless:
- you provide an alternative that does not rely on a cognitive function test;
- there is something on the site that helps the user to complete the cognitive function test;
- the cognitive function test involves having to recognize objects, such as those annoying CAPTCHAS where you have to find all the images with the motorcycles or fire hydrants; or
- the cognitive function test is about identifying non-text content that the user provided.
The AAA requirement is the same other than it does not allow the last two points:
- a cognitive function test where you have to recognize objects (that would be getting rid of those annoying CAPTCHAS) and
- a cognitive function test that involves identifying non-text content that the user provided.
Example
An example of accessible authentication would be allowing a password manager to enter the information and allowing for copy and paste into a password field.
Who It Helps
This helps people with cognitive issues, who may have trouble memorizing information or with perceptual processing, for example. But, also, absolutely nobody wants to have to remember or retype a 20-character password into a password field, right?
Removed WCAG 2.2 Guideline
All right. That covers all of the new ones.
Like I mentioned earlier, there was a success criterion that got removed — 4.1.1 Parsing. This is because it is now considered obsolete. Parsing was included in WCAG 2.0 to address issues with the parsing of HTML by assistive technology. This is no longer an issue, or other criteria already address it.
Adrian Roselli has an interesting article talking all about parsing, called The 411 on 4.1.1.
Should You Adopt WCAG 2.2?
So now you might be wondering what does this mean for me? Should you go ahead and adopt the new WCAG 2.2 criteria into your client work?
Most accessibility laws at this time call for 2.0 or 2.1 AA, but adopting these new criteria will result in a more accessible user experience on the websites you build.
It looks like in the U.K., though, the Government Digital Service has made a statement that they are working on how to assess these new success criteria and will start monitoring for them in October 2024. Until then, they will monitor accessibility of websites to WCAG 2.1 level AA.
Helping your clients address WCAG 2.2 on their websites is not only a way for them to have a better website. It’s also an opportunity to position yourself as a web expert, remind them of your services and get more work by helping them incorporate these enhancements to their website.
If you’re new to having the accessibility conversation with clients, be sure to get the free guide, Understanding and Selling Accessible Websites.
You’ll find out:
- what you can do right now to help your clients and yourself, while making money doing it!
- the types of businesses that need accessibility, so you can target them for potential work;
- how to talk about it with clients, so you can feel confident.
Originally published as a podcast and transcript at: https://creative-boost.com/whats-new-in-wcag-2-2/
