Loading...
Loading content...
Loading content...
Keyboard focus must be clearly visible with sufficient contrast and size.
Why it matters: Users need to see which element has focus to know where they are on the page.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
What This Means: This success criterion requires that when users navigate using the keyboard, there must be a visible indicator showing which element currently has keyboard focus. This focus indicator (often a border, outline, or highlight) must be clearly visible with sufficient contrast and size so users can easily see where they are on the page.
Why It's Important: Keyboard users rely entirely on the focus indicator to know which element they're currently on. Without a visible focus indicator, keyboard users cannot tell where they are or which element will be activated. This makes navigation impossible. Users with low vision also need clear, high-contrast focus indicators to see where they are.
Ensure all focusable elements have a visible focus indicator. Use CSS : focus pseudo-class to style focus indicators with sufficient contrast (at least 3: 1 for non-text contrast per 1.4.11). Make focus indicators clearly visible - common styles include 2px solid borders, outlines, or background color changes. Never remove focus indicators with outline: none without providing an alternative. Test by tabbing through the page and verifying focus is always 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.
This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.4.7 Focus Visible are met. Check off items as you complete them.
Note: These are official W3C resources for 2.4.7. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.4.7 Focus Visible 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