WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum) (W3.org)
Issue description
WCAG 2.4.11, “Focus Not Obscured (Minimum)” aims to ensure that when a user navigates a website using a keyboard, the visual indicator of focus (usually a highlight or outline around the element) is not hidden or obscured by other content. This is essential for people who rely on keyboards for navigation.
Some websites have design elements that can obscure the focus indicator, making it difficult or impossible to see where the keyboard focus is located. This can happen when:
- Overlapping elements: Other page elements, such as drop-down menus, overlapping images, or fixed headers, cover the focused element, hiding the focus indicator.
- Lack of contrast: The focus indicator blends in with the background or surrounding content, making it difficult to distinguish.
- Scrolling issues: The focus indicator might be visible initially, but when the user scrolls, it gets hidden behind other content.
Why focus not obscured matters
- Prevents confusion: Users need to clearly see where the focus is to understand which element they are interacting with and avoid accidental activations.
- Aids navigation: A visible focus indicator helps users track their position on the page and understand the order of interactive elements.
- Ensures accessibility: It’s essential for users who rely on keyboards or assistive technologies to interact with the website effectively.
Essentially, WCAG 2.2 (AA) SC 2.4.11 Focus Not Obscured (Minimum) ensures that the focus indicator is always fully visible and distinguishable, even when the user scrolls or interacts with other elements on the page. This makes keyboard navigation more predictable and user-friendly for everyone.
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 (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.11, “Focus Not Obscured (Minimum)” involves ensuring the keyboard focus indicator is always fully visible and distinguishable. Here’s how:
Manage overlapping elements
- Z-index: Use the CSS
z-indexproperty to control the stacking order of elements. Ensure that the focused element and its focus indicator have a higherz-indexthan any overlapping elements. - Reposition elements: If possible, reposition elements to avoid overlap with the focused element. For example, you might need to adjust the position of a fixed header or a drop-down menu.
- Dynamic adjustments: Use JavaScript to dynamically adjust the position or visibility of elements when an element receives focus, ensuring the focus indicator remains visible.
Ensure sufficient contrast
- Contrast ratio: The focus indicator should have a contrast ratio of at least 3:1 against the background color and any adjacent colors. Use a contrast checking tool to verify this.
- Focus indicator style: Choose a focus indicator style that provides sufficient contrast. This might involve using a thicker outline, a more contrasting color, or a combination of visual cues (e.g., outline and background color change).
Handle scrolling
- Maintain visibility on scroll: Ensure that the focus indicator remains visible when the user scrolls the page. This might involve using CSS techniques like
position: fixedor JavaScript to keep the focused element within the viewport.
Test thoroughly
- Keyboard navigation: Test the website using only the keyboard to check for any instances where the focus indicator is 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.
Example
If a fixed header overlaps the focus indicator of a focused link in the main content area:
- Increase z-index: Give the main content area a higher
z-indexthan the fixed header. - Adjust header position: Consider adding a small margin to the top of the main content area to prevent the header from overlapping the focus indicator.
- Dynamically adjust header: Use JavaScript to make the header transparent or slightly shift its position when an element in the main content area receives focus.
By implementing these techniques, you can ensure that the focus indicator is always visible and distinguishable, making keyboard navigation clear and predictable for all users.
