Loading...
Loading content...
Loading content...
Focused elements must not be completely hidden by sticky headers, footers, or other overlays.
Why it matters: Users need to see the element that has keyboard focus to interact with it effectively.
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
What This Means: This success criterion requires that when a user interface component receives keyboard focus, it must not be completely hidden by other content created by the author. This includes sticky headers, fixed footers, modal overlays, or any other positioned elements that might cover focused components.
Why It's Important: Keyboard users rely on visual focus indicators to know which element they're interacting with. If a focused element is completely hidden, users cannot see what they're about to activate, leading to confusion and errors. This is especially problematic for elements near the top or bottom of the viewport where sticky headers or footers might cover them.
Use CSS scroll-margin properties to ensure focused elements scroll into view with enough space above and below. For sticky headers, add scroll-margin-top. For sticky footers, add scroll-margin-bottom. Test keyboard navigation to ensure all focused elements remain at least partially visible. Consider the z-index of sticky elements to ensure they don't cover focus indicators.
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 cognitive disabilities 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 sticky header completely covers a focused link at the top of the page.
<header style="position: fixed; top: 0; z-index: 1000; height: 80px;">
Navigation
</header>
<a href="#" style="margin-top: 60px;">Link that gets hidden</a>The page automatically scrolls to keep focused elements visible above sticky headers.
/* CSS ensures focus is visible */
:focus {
scroll-margin-top: 100px; /* Accounts for sticky header */
}This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.4.11 Focus Not Obscured (Minimum) are met. Check off items as you complete them.
Note: These are official W3C resources for 2.4.11. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.4.11 Focus Not Obscured (Minimum) 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