Why it matters
Keyboard users need to see where focus is at all times to navigate effectively. Hidden focus is like hiding the mouse cursor.
Common violations
- CSS that removes outline without replacement
- Focus indicators that blend into the background
- Focus styles overridden by component libraries
- Low-contrast focus rings
Code examples
Bad
button:focus { outline: none; }Good
button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }How to fix
Never remove focus outlines without providing a visible alternative. Use focus-visible for cleaner mouse interactions while preserving keyboard visibility.
Related criteria
Related resources
Scan your site