The WCAG 2.2. Navigable Guidelines provide ways to help users find content as well as navigate and determine where they are on a website.
These tasks are often more difficult for people with disabilities, so it’s up to business owners to ensure that their site navigation is as seamless as possible for all their users.
Why is it important to help visitors navigate?
Navigation on web pages serves two purposes:
- To tell users where they are
- To enable users to go somewhere else
In the latest WCAG 2.2 update, three Navigable success criteria have been included:
- 2.4.11 Focus Appearance (Minimum) (AA)
- 2.4.12 Focus Appearance (Enhanced) (AAA)
- 2.4.13 Fixed Reference Points (A)
Let’s delve a little deeper into each criterion and see what these new guidelines actually mean for your website.
2.4.11 Focus Appearance (Minimum) (AA)
The intent of WCAG standard 2.4.11 is to ensure the current point of focus is visible to users with low-vision who use keyboard navigation.
While closely related to 2.4.7 Focus Visible and 1.4.11 Non-text Contrast, this new criteria requires sufficient contrast between the focused and unfocused states.
A way to pass this criterion is to include a 1-pixel thick border around the focused element, alternatively, the background colour of the focused element should change significantly compared to the latter.
The thick outline around the middle example link provides a strong indicator of focus.
A little more on focus indicators…
For the keyboard focus indicator of each User interface component, all of the following are true:
- Minimum area: The focus indication area is greater than or equal to a 1 CSS pixel border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.
- Change of contrast: The colour change for the focus indication area has a contrast ratio of at least 3:1 with the colours of the unfocused state.
- Adjacent contrast: The focus indication area has a contrast ratio of at least 3:1 against all adjacent colours for the minimum area, or greater, or has a thickness of at least 2 CSS pixels.
- Unobscured: The item with focus is not entirely hidden by author-created content.
2.4.12 Focus Appearance (Enhanced) (AAA)
The intent of WCAG standard 2.4.12 is to ensure the current point of focus is highly visible to users with low vision who use a keyboard to navigate a website.
This criterion takes the newly introduced WCAG standard 2.4.11 up a notch by providing higher visibility. The minimum size of this focus indicator must be at least 2 pixels thick around the element.
The inner outline is slightly smaller than the outer edge of the component, but using a 2px thick indicator means it is well over the minimum requirement of 180px squared.
- Minimum area: The focus indication area is greater than or equal to a 2 CSS pixel solid border around the control.
- Change of contrast: Colour changes used to indicate focus has a contrast ratio of at least 4.5:1 with the colours changed from the unfocused control.
- Unobscured: No part of the focus indicator is hidden by author-created content.
2.4.13 Fixed Reference Points (A)
The intent of WCAG standard 2.4.13 is to help disabled users find references to content based on the page locators found in both the printed and digital versions of a publication.
This will ensure that all users are (quite literally) on the same page.
A way to pass this criterion is to include a navigation mechanism to identify page number references within a digital publication that match the physical version of the publication.
Conclusion
WCAG is a set of standards that have been introduced to make web accessibility available to all users, whether able-bodied or not. By ignoring these guidelines, business owners risk losing lots of potential business.
We at Little Forest support your business with automated accessibility monitoring, helping you improve the web experience for your users whilst avoiding costly lawsuits and fines. We work with you to understand the compliance of your site and use the reports to help you put together an accessibility strategy.
The Little Forest platform gives you instant reports on how your pages perform against all major standards. We are continuously upgrading our systems to be in line with the latest legal requirements helping you stay in line with the latest guidelines.
Is your business compliant with the latest Web Accessibility guidelines? Get in touch and speak to the Little Forest team today!
Photo by Pankaj Patel on Unsplash
