Focus Not Obscured (Enhanced)
Summary:
WCAG 2.4.12, "Focus Not Obscured (Enhanced)," is about ensuring exceptional clarity for keyboard users when navigating through web content. This AAA level criterion mandates that focused elements must be fully visible and distinguishable from surrounding elements, enhancing accessibility for users with visual impairments or those who rely on keyboard navigation.
What:
It requires that elements receiving keyboard focus are not obscured by other content and are clearly distinguishable from adjacent elements.
Why:
Visible and distinct focus is crucial for users navigating with a keyboard, as it aids in understanding which element is active and ensures seamless interaction with the content.
Examples and Scenarios:
- Pop-up Modals: Ensure focused elements within a modal are not obscured by the modal itself or other page content.
- Form Navigation: In forms, clearly highlight the focused field, ensuring it stands out from other fields and content.
- Menu Interaction: When navigating through menus, the focused menu item should be distinctly marked and not overlapped by other menu items or content.
How to Comply:
- Websites: Use CSS to style focused elements to ensure they are not obscured and are visually distinct from other elements.
- Mobile Apps: Implement clear visual indicators for focused elements within the app's interface.
- Software Applications: Ensure that all interactive components have enhanced visibility when focused, especially in complex interfaces.
Exceptions:
- Transitional Focus Effects: Short-lived focus effects or transitions might temporarily obscure focus but are generally acceptable if they are brief and enhance overall usability.
- Complex Interactions: In certain complex interfaces or components, achieving enhanced focus visibility might pose design challenges. However, strive for the clearest focus indication possible within these constraints.