The next version of the Web Content Accessibility Guidelines (WCAG) is on its way, and it’s widely expected to include new requirements for keyboard focus indicators.
Currently, WCAG 2.2 is scheduled for official publication in early 2023. In other articles, we’ve explained how WCAG 2.2 differs from WCAG 2.1 — and why the new standards may change prior to their official release.
With that said, the latest WCAG Candidate Recommendation Snapshot outlines the new requirements for “focus not obscured,” and those standards are unlikely to change prior to WCAG 2.2’s release. Clear, visible focus indicators are important for keyboard accessibility — WCAG 2.2 simply prohibits those indicators from disappearing behind other types of content.
Here’s a quick overview of the two new success criteria and how following them can improve experiences for people with disabilities.
An Overview of WCAG 2.2’s “Focus Not Obscured" Requirements
The relevant success criteria are WCAG 2.2 Success Criterion (SC) 2.4.12, “Focus Not Obscured (Minimum),” and WCAG 2.2 SC 2.4.13, “Focus Not Obscured (Enhanced).”
Here’s the full text of WCAG 2.2 SC 2.4.12:
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
This is a Level AA criterion, which means that websites will need to conform with the standard in order to provide a reasonable level of accessibility.
In contrast, WCAG 2.2 SC 2.4.13 is a Level AAA criterion — it’s not strictly necessary for digital compliance, but following it may improve online experiences for some users. Here’s the full text:
When a user interface component receives keyboard focus, no part of the focus indicator is hidden by author-created content. [Emphasis added.]
Both of these criteria extend the requirements of WCAG SC 2.4.7, “Focus Visible,” which requires focus indicators to be — you guessed it — visually identifiable.
Related: What You Need to Know About Visual Focus and Accessibility
Why Focus Indicators Are Important for Digital Accessibility
Focus indicators are important because they help people understand which element they’re operating (or focusing on). For example, if a keyboard user navigates to a clickable button, the button may be outlined with a thin dotted line.
Visual focus is important for keyboard-only users (people who use a keyboard without a mouse to navigate the internet). Focus indicators can also help people with attention deficiencies, short-term memory disabilities, and other neurocognitive differences.
All major web browsers have built-in focus indicators. You can change your website’s CSS (Cascading Style Sheets) to enhance the appearance of the visual focus — but if you’re not careful, you can also override the browser’s default focus indicator, which may prevent users from understanding how to operate your webpage.
Needless to say, that’s bad for the user experience, which is why WCAG’s “Focus Visible" requirements are important. WCAG 2.2 will address a related problem: Some websites have content that obscures the user’s visual focus. This can occur when a website contains “sticky" or floating content.
For example, if your website uses a persistent header (also called a “sticky" header), the header remains in the same place as the user scrolls down the screen. With poor implementation, your sticky header might obscure elements that have focus — which can be extremely annoying for users.
Related: What is Keyboard Accessibility?
Avoiding WCAG “Focus Not Obscured" Failures
Most basic websites will meet WCAG 2.2’s “Focus Not Obscured" criteria, and the best way to fulfill the requirement is to avoid non-modal dialogs, sticky elements, and any other floating or scroll-dependent element that might behave in an unexpected way.
However, if your website has sticky headers, sticky footers, pop-up notifications, or any other complex user interface elements, you’ll need to test carefully. Some tips to keep in mind:
-
You can test your content by using the Tab and Shift+Tab keys to simulate the experience of a keyboard-only user.
-
Test your content with several web browsers. Different products may use different techniques to interpret CSS and present your content.
-
Pay special attention to user interface components including form elements, user login fields, and hyperlinks.
-
Sticky elements may be addressed with the CSS scroll-padding property, which sets the padding on all sides of an element at once. Read this scroll-padding guide from Mozilla Developer Network (MDN).
-
WCAG 2.2 requires focus indicators to be “not entirely hidden" for Level AA conformance. However, wherever possible, try to make sure that no part of the focus indicator is hidden.
For specific guidance with WCAG 2.2 conformance, send us a message to connect with an expert.
