One line of CSS has been quietly breaking keyboard navigation across the web for years.
*:focus,
*:focus-visible {
outline: none;
}
It started as an aesthetic decision. Browser default focus rings looked inconsistent across operating systems and browsers — an unsightly dotted border that clashed with carefully designed interfaces. So developers removed them. And in many cases, forgot to replace them.
What actually happens when outline is removed
For mouse users, nothing changes. The interface looks exactly the same. Clicks work, interactions work, and there is no visible difference in the experience.
For keyboard users, the cursor becomes invisible.
Every time they press Tab, focus moves to the next interactive element — but there is nothing on screen to indicate where that is. The button received focus. The link received focus. The input received focus. But none of that is visible. The user has no way to know where they are, what they are about to activate, or whether they have reached the element they were looking for.
This is not a minor inconvenience. For someone navigating exclusively by keyboard — whether by preference, necessity, or assistive technology — it makes the interface functionally unusable.
What WCAG requires
Two criteria apply here:
WCAG 2.4.7 — Focus Visible (Level AA) requires that any keyboard operable interface has a visible focus indicator. This has been part of WCAG since version 2.0. It is a minimum — it does not specify how visible the indicator needs to be, only that it exists.
WCAG 2.4.13 — Focus Appearance (Level AAA) goes further. Introduced in WCAG 2.2, it requires that the focus indicator meets specific measurable minimums: a minimum area equivalent to a 2px perimeter around the component, and a contrast ratio of at least 3:1 between the focused and unfocused states.
The distinction matters in practice. A 1px dotted outline in a low-contrast color technically satisfies 2.4.7 but fails the spirit of what a focus indicator is for. 2.4.13 closes that gap — even though it is currently AAA, it represents the direction the standard is moving.
The correct fix
The solution is one declaration, applied correctly:
*:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
Two details matter here.
Use :focus-visible, not :focus. The :focus-visible pseudo-class applies only when the browser determines that focus should be visually indicated — typically during keyboard navigation. It does not trigger on mouse clicks. This means keyboard users get the visible indicator they need, while mouse users do not see an outline appear every time they click a button. This is the correct balance.
Use outline, not border or box-shadow as a replacement. Outline does not affect layout, respects outline-offset, and works correctly with Windows High Contrast Mode — an assistive technology that relies on system colors rather than author-defined ones. Custom border or box-shadow replacements can break in High Contrast Mode, effectively removing the focus indicator for users who depend on it.
The broader pattern
outline: none is often found in CSS resets or base stylesheets — applied globally and then never revisited. It is easy to miss in an audit because it is invisible by definition.
The fix requires only adding the declaration above. But more importantly, it requires treating focus visibility as a design requirement, not an afterthought — which means never removing the default outline without immediately providing a replacement that meets the contrast and size requirements of 2.4.13.