Loading...
Loading content...
Loading content...
Focused elements must be fully visible without any part being obscured.
Why it matters: Enhanced visibility ensures optimal focus indication for all users.
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.
What This Means: This success criterion is stricter than Level AA 2.4.11. It requires that when a user interface component receives keyboard focus, absolutely no part of the component can be hidden by author-created content. This means the entire focused element, including its focus indicator, must be fully visible.
Why It's Important: For users with low vision or attention disorders, even partial obscuring of focused elements can make it difficult or impossible to see what they're interacting with. Full visibility ensures optimal focus indication and reduces the cognitive load of trying to identify partially visible elements. This enhanced requirement provides the best possible experience for keyboard navigation.
Implement more generous scroll margins than the minimum requirement. Use scroll-margin-top and scroll-margin-bottom to create adequate spacing. Consider centering focused elements in the viewport when possible. Test thoroughly to ensure no part of any focused element is ever obscured, even by sticky headers, footers, or other positioned content. Pay special attention to focus indicators and ensure they're fully visible.
This criterion ensures that keyboard users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with attention disorders can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
A focused element is partially covered by a sticky header.
<header style="position: fixed; top: 0; z-index: 1000;">
Navigation
</header>
<a href="#" style="margin-top: 50px;">Link (partially hidden when focused)</a>A focused element is completely visible with proper scroll margins.
<style>
:focus {
scroll-margin-top: 100px;
}
</style>
<header style="position: sticky; top: 0;">Navigation</header>
<a href="#">Link (fully visible when focused)</a>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.4.12 Focus Not Obscured (Enhanced) are met. Check off items as you complete them.
Note: These are official W3C resources for 2.4.12. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.4.12 Focus Not Obscured (Enhanced) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.4 Navigable