Show keyboard focus with :focus-visible
outline none on focus is the single most common accessibility defect on the web, and it is almost always somebody removing a ring they only ever saw after a mouse click. focus-visible solves the actual complaint. W3C lists C45 as sufficient for 2.4.7 Focus Visible, and describes the mechanism carefully, which is worth repeating because the asymmetry matters. Browsers apply heuristics to decide when to show these styles. They always show them when somebody is navigating by keyboard, and they generally do not show them for a mouse or pointer interaction. Guaranteed one way, not the other. So style focus-visible with a ring you would be happy to see, keep the plain focus rule as a fallback for anything older, and never write outline none without putting something visible in its place.
How we find it in an audit
outline none is a one-line search across every stylesheet and it is the first thing we run. Then we tab the whole site and watch. Every interactive element should show a clear indicator, and the places it goes missing are custom components, third-party widgets and anything with a design system override on top of it.
How affected users experience it
Without a visible focus indicator, keyboard navigation is pressing Tab and guessing. Sighted keyboard users, people with motor disabilities, people with low vision and anybody whose mouse has just died all land in the same place. The only way to find out what is selected is to press Enter and see what happens.
Passes vs. fails
Passes
button:focus-visible { outline: 3px solid #14304d; outline-offset: 2px; }Fails
button:focus { outline: none; }How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element in sequential focus order has visible focusA tool can check this
Other ways to satisfy this rule
9 guides on this site are filed under 2.4.7 Focus Visible. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C15sufficientStyle the focus indicator instead of removing it
- C40sufficientBuild focus indicators that work on any background
- G149sufficientUse components the browser highlights on focus
- G165sufficientKeep the platform's default focus indicator
- G195sufficientShip a clearly visible custom focus indicator
- SCR31sufficientHighlight the focused element with script
This guide is our interpretation of W3C technique C45: Using CSS :focus-visible to provide keyboard focus indication. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.