Loading...
Loading content...
Loading content...
Focus indicators must meet enhanced size and contrast requirements for maximum visibility.
Why it matters: Strong focus indicators help users with low vision track their position.
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
What This Means: This success criterion requires that when a keyboard focus indicator is visible, it must meet specific size and contrast requirements. The focus indicator must be at least as large as a 2 CSS pixel thick perimeter around the unfocused component, and it must have a contrast ratio of at least 3:1 between the focused and unfocused states.
Why It's Important: Users with low vision need highly visible focus indicators to track their keyboard position. Weak or thin focus indicators can be difficult or impossible to see, especially against certain backgrounds. This enhanced requirement ensures that focus indicators are prominent enough to be easily detected by users with visual impairments.
Use focus indicators that are at least 2 CSS pixels thick. Ensure the contrast ratio between the focused and unfocused states is at least 3: 1. This can be achieved with outline, border, or background color changes. Test focus indicators against various background colors to ensure they meet contrast requirements. Consider using outline-offset to create more visible focus indicators.
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 keyboard users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that older users 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.
Focus indicator is thin (1px) with low contrast, hard to see.
<style>
:focus {
outline: 1px solid #ccc; /* Too thin, low contrast */
}
</style>Focus indicator is thick (2px+) with high contrast, clearly visible.
<style>
:focus {
outline: 3px solid #0066cc; /* Thick, high contrast */
outline-offset: 2px;
}
</style>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.4.13 Focus Appearance are met. Check off items as you complete them.
Note: These are official W3C resources for 2.4.13. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.4.13 Focus Appearance 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