WCAG 2.2 (AAA) SC 2.4.12 Focus Not Obscured (Enhanced) (w3.org)
Issue description
WCAG 2.4.12, “Focus Not Obscured (Enhanced),” builds upon the Level AA criterion 2.4.11 by setting stricter requirements for the visibility of keyboard focus indicators. While 2.4.11 focuses on ensuring the focus indicator is not completely obscured, this Level AAA criterion aims to prevent it from being obscured even partially.
Even if a focus indicator is technically visible, it might still be difficult to perceive if it is partially hidden or obscured by other content. This can happen when:
- Partially overlapping elements: Other page elements, such as drop-down menus, sticky headers, or overlapping images, might partially cover the focus indicator.
- Low contrast with adjacent colors: The focus indicator might have sufficient contrast with the background but poor contrast with adjacent colors, making it difficult to distinguish.
- Complex backgrounds: Busy or complex background patterns can make it hard to see the focus indicator clearly.
Why focus not obscured (enhanced) matters
- Enhanced visibility: Ensuring the focus indicator is fully visible and distinguishable makes it easier for users with low vision or cognitive disabilities to identify the focused element.
- Improved navigation: It helps users track their position on the page and understand the focus order more easily.
- Reduced cognitive load: It reduces the mental effort required to locate and identify the focused element.
WCAG requirements
This guideline requires that any keyboard operable user interface has a mode of operation where the keyboard focus indicator:
- Is not obscured: The focus indicator is not obscured or partially obscured by any other content on the page.
- Meets contrast requirements: The focus indicator meets the required contrast ratios against both the background and any adjacent colors.
Essentially, this criterion aims to maximize the visibility of the focus indicator, making it as clear and unambiguous as possible. This enhances accessibility for users who rely on keyboard navigation, particularly those with low vision or cognitive differences
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 2.4.3 Focus Order
- WCAG (Level AA) SC 2.4.7 Focus Visible
- WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum)
- WCAG 2.2 (AAA) SC 2.4.13 Focus Appearance
- WCAG (Level A) SC 3.2.1 On Focus
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.12, “Focus Not Obscured (Enhanced)” involves ensuring the keyboard focus indicator is completely visible and distinguishable, with no part of it hidden by any other content. Here’s how to achieve this:
Manage overlapping elements
z-index: Use the CSSz-indexproperty to control the stacking order of elements. Ensure the focused element and its focus indicator have a higherz-indexthan any other element that could potentially overlap it.- Reposition elements: Adjust the position of elements that might obscure the focus indicator. This could involve adding margins, padding, or changing the layout to prevent overlaps.
- Dynamic adjustments: Use JavaScript to dynamically adjust the position or visibility of elements when an element receives focus, ensuring the focus indicator remains fully visible. For example, a sticky header could become transparent or shift position when a lower element is focused.
Ensure sufficient contrast with adjacent colors
- Contrast checking: Use a contrast checking tool to verify that the focus indicator has a contrast ratio of at least 3:1 against both the background color and any adjacent colors. This is a free contrast checker (e.g., Contrast Checker – WebAIM) to analyze your contrast ratio.
- Focus indicator style: Choose a focus indicator style that provides sufficient contrast against all surrounding colors. This might involve a thicker outline, a more contrasting color, a combination of visual cues (outline and background color change), or even a glow effect.
Handle scrolling
- Maintain visibility on scroll: Ensure the focus indicator remains fully visible when the user scrolls the page. This might involve using CSS techniques like
position: fixedor JavaScript to keep the focused element and its indicator within the viewport. - Scrolling behavior: Consider adjusting the scrolling behavior to prevent content from abruptly covering the focused element. For example, you could use smooth scrolling or ensure that scrolling stops when a focused element reaches the edge of the viewport.
Complex backgrounds
- Solid backgrounds: If possible, use solid or simple background colors behind interactive elements to ensure the focus indicator is easily visible.
- Sufficient contrast with patterns: If using background patterns or images, ensure there is still sufficient contrast between the focus indicator and all parts of the background.
Testing
- Keyboard navigation: Thoroughly test the website using only the keyboard to check for any instances where the focus indicator is even partially obscured.
- Different browsers: Test in different browsers to ensure consistent behavior.
- Assistive technologies: Test with screen readers to ensure the focus indicator is properly conveyed to users.
By meticulously addressing these points, you can create a highly accessible interface where the focus indicator is always completely visible, significantly aiding users who navigate with keyboards.
