Can you read the text on the image above easily? No? That’s because it has a low contrast text on the background colour. It has a contrast ratio of 1.18:1 and to meet accessibility guidelines it should be at least 4.5:1. Familiarising yourself with the Web Content Accessibility Guidelines (WCAG) has a lot of helpful information – but it can also take time to understand, explain, and implement. So, in this blog post, we’re covering the nine success criteria for WCAG 2.2.
What is WCAG?
86.4% of website home pages have low contrast text according to the WebAIM Million 2023 report. Additionally, in New Zealand alone, there are approximately 200,000 colour deficient people. and approximately 150,000 with low vision. That’s a massive percentage of New Zealanders who can’t easily access content on a webpage due to accessibility standards not being met – not only does it exclude them, but organisations miss an opportunity to communicate better with a broader audience. And that’s just one example of accessibility challenges – by no means is it limited to vision accessibility. So, what other considerations can be made so content can be easily accessed by more people?
WCAG was developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) to make sure websites are more accessible to people with disabilities. We covered the basics of WCAG in our recent blog post but here is a high-level summary:
By following the principles of WCAG, organisations can ensure they’re accessible to people with disabilities, including those with visual, auditory, cognitive, and motor impairments. This way everyone has access to the same information.
There are four guiding principles of WCAG, also known as the acronym POUR:
- Perceivable: Information and user interface components must be presented in a way all users can perceive
- Operable: User interface (UI) components (how you interact with the screen and content of a page) and navigation must be operable.
- Understandable: Navigating a website and accessing information should be easy for a user or a screen reader.
- Robust: Content must be robust enough to be interpreted reliably by a variety of users, including assistive technologies.
Additionally, there are three levels of conformance to meet the needs of different group in WCAG, which you’ll see throughout their criteria:
- Level A is the minimum level of requirements.
- Level AA includes all Level A and Level AA requirements.
- Level AAA includes all Level A, AA, and AAA requirements.
So think of each additional A on a level like a plus after a grade, so AAA is A++, a gold standard.
What is WCAG 2.2?
WCAG evolves as the digital environment changes with each iteration further improving standards. As such, WCAG 2.2 was released in October 2023 to account for the increase in mobile use and is the most up-to-date version of WCAG. Plus, it is the next step up from WCAG 2.1.
If you think about game versions or new versions of software, you’ll see they follow a similar framework of ‘number.number.’ When you get a new version of a game or software update, they increase the number on the right side of the bullet point as a way to track the update. Updates are built on top of the current version to improve the experience. WCAG versioning works the same way. Basically, if you meet the WCAG 2.2 guidelines, you also meet the guidelines for WCAG 2.1, WCAG 2.0, and so on. So each iteration of WCAG builds on top of the last one, to improve the standard without making any major changes to what is already in play.
9 new success criteria added to WCAG 2.2
The WCAG 2.2 guidelines include nine new success criteria to the mix. And, whilst the success criteria ultimately benefit all users, it’s been introduced specifically for people who have low vision, motor dexterity limitations, and cognitive issues.
Additions to Operable - Improving navigable elements
People with low vision or those who use assistive tools like a screen reader, navigate a website with a keyboard. When using a screen reader you tab through the elements on a page, as that’s how the screen reader processes the page content. To know where you are on the screen, there is a keyboard focus that highlights the element you’re on. For example, the title of a list.
In the WCAG 2.2 guidelines, Guideline 2.4 covers navigable elements. We’ll cover the new 2.4 success criteria below.
1. Focus Not Obscured (Minimum) (Level AA)
The success criteria for 2.4.11 ensures when a user is navigating a site with a keyboard and the keyboard focuses on an element, the element focused on isn’t entirely hidden. For example, if the user is focused on the search bar, a notification or something similar doesn’t completely obscure the search bar.
Read more about Focus Not Obscured (Minimum) (Level AA).
2. Focus Not Obscured (Enhanced) (Level AAA)
Building on top of success criteria 2.4.11, 2.4.12 ensures when using keyboard focus that no part of the element is covered up. Following on from the last example, this would mean that the search bar has nothing in front of it.
Learn more about Focus Not Obscured (Enhanced)(Level AAA).
3. Focus Appearance (Level AAA)
The Focus Appearance criteria ensures a keyboard focus indicator is obvious and clearly visible. An area of the focus indicator should be as large as the area of a 2 CSS pixel thick perimeter of the unfocused component. Plus, the success criteria 2.4.13 states it should have a contrast ratio of at least 3:1 between the focused and unfocused states. For example, a focus indicator could be a rectangle, that’s clearly visible when selecting a button.
Read more about Focus Appearance (Level AAA).
Improvements to Operable - Reducing movement
The next section of WCAG 2.2, Guideline 2.5 covers input modalities to make it easier for a user to use a site in various ways beyond the keyboard. Essentially, Guideline 2.5 are measures in place to decrease the amount of movement you have to make to get access to information if you’ve got a motor disability. We’ll cover the new 2.5 success criteria below.
4. Dragging Movements (Level AA)
A dragging movement is when you use a mouse (pen or touch contact) and need to click on a starting point, hold the contact, reposition the pointer, and then release the pointer. For example, when you highlight text. This requires precision, and not everyone can use a mouse to drag their point. Instead of using dragging movements, the 2.5.7 success criteria proposes using a single pointer (a single click), unless dragging is essential.
For more about Dragging Movements (Level AA), check out the QCAG 2.2 Understanding Docs.
5. Target Size (Minimum) (Level AA)
Section 2.5.8 makes it easier for elements to be clicked on (like a button), and prevents users from accidentally activating adjacent elements, they must be at least 24 by 24 CSS pixels. Otherwise, they must meet spacing requirements, apart from the specific elements listed.
Learn more about Target Size (Minimum) (Level AA).
Updates for Understandable - Reducing cognitive effort
Lastly, the new additions to WCAG 2.2 guidelines is to make it easier for accessing help and for multi-step processes to be completed by reducing cognitive effort. Guideline 3.2 covers predictable components of a site, ensuring web pages appear and work in predictable ways. Additionally, Guideline 3.3 covers input assistance to help users avoid mistakes. We’ll go over the success criteria for the new additions below.
6. Consistent Help (Level A)
To be able to find help and support more easily, section 3.2.6 ensures resources are consistently located across web pages. For example, if the website offers chat as a support method, it’s in the same place on every page.
Learn more about Consistent Help (Level A).
7. Redundant Entry (Level A)
Some people with cognitive disabilities have difficulty remembering what they entered before. Section 3.3.7 means when you’ve already entered information, (such as your delivery address) in a multi-step process, you won’t need to enter the details again. So if your delivery address is asked again in a future step, it will either be displayed for you to copy and paste, auto-populated, or available for you to select so you don’t need to type it out again.
Read more about Redundant Entry (Level A).
8. Accessible Authentication (Minimum) (Level AA)
When logging into a website, often you need a username and a password, and on top of that two-factor authentication provides you a passcode or a puzzle to solve to login. This login process takes a lot of mental effort, especially for someone with cognitive disabilities. So, section 3.3.8 means that a cognitive function test isn’t required as a step in the authentication process.
For more about Accessible Authentication (Minimum) (Level AA) check out the QCAG 2.2 Understanding Docs.
9. Accessible Authentication (Enhanced) (Level AAA)
Similar to 3.3.8, 3.3.9 states that the login process can only require a cognitive test if it has an alternative method, or a mechanism in place to assist the user with the test. Essentially, 3.3.9 specifically removes the exception for object-recognition and user-supplied identification tests to further enhance accessibility for users with cognitive issues.
Learn more about Accessible Authentication (Enhanced) (Level AAA).
Accessibility support
So what is WCAG 2.2? Ultimately, WCAG 2.2 introduces new improvements to WCAG so web content is more accessible to a wider range of people. As technology changes, our accessibility standards change along with it, so we can ensure a more accessible web experience for everyone. At Catalyst, our DIA-approved accessibility team can provide you with training, consulting, and support services. To continue on your accessibility journey, reach out to our experts today.