One line of CSS has been breaking keyboard navigation across the web for years.
*:focus,
*:focus-visible {
outline: none;
}
It started as an aesthetic decision. Default focus rings looked different across operating systems and browsers, and that dotted border clashed with carefully designed interfaces. So developers removed them, and in many cases forgot to replace them.
What happens when the outline is removed
For mouse users, nothing changes. The interface looks the same, and clicks and interactions work as before.
For keyboard users, the cursor disappears.
Each time they press Tab, focus moves to the next interactive element, but nothing on screen shows where it went. The button, the link and the input all receive focus, invisibly. The user can't tell where they are, what they're about to activate or whether they've reached the element they wanted.
For someone who navigates only by keyboard, whether by preference, by necessity or through assistive technology, that makes the interface unusable.
What WCAG requires
Two criteria apply.
WCAG 2.4.7 Focus Visible (Level AA) requires any keyboard operable interface to have a visible focus indicator. It has been part of WCAG since version 2.0. It's a minimum: it says the indicator must exist, not how visible it must be.
WCAG 2.4.13 Focus Appearance (Level AAA), introduced in WCAG 2.2, sets measurable minimums: an area at least equivalent to a 2px perimeter around the component, and a contrast ratio of at least 3:1 between the focused and unfocused states.
In practice, a 1px dotted outline in a low-contrast color technically satisfies 2.4.7 while failing the purpose of a focus indicator. 2.4.13 closes that gap. It's AAA for now, but it shows where the standard is heading.
The fix
One declaration does it:
*:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
}
Two details matter.
Use :focus-visible instead of :focus
The :focus-visible pseudo-class applies only when the browser decides focus should be shown, which usually means keyboard navigation. It doesn't trigger on mouse clicks, so keyboard users get the indicator they need and mouse users don't see an outline every time they click a button.
Use outline instead of border or box-shadow
Outline doesn't affect layout, respects outline-offset and works with Windows High Contrast Mode, an assistive technology that relies on system colors instead of author-defined ones. Border or box-shadow replacements can break in High Contrast Mode, which removes the focus indicator for the users who depend on it.
Where outline: none hides
outline: none often sits in CSS resets or base stylesheets, applied globally and never revisited. It's easy to miss in an audit because, by definition, you can't see it.
Adding the declaration above fixes the code. The lasting fix is to treat focus visibility as a design requirement: never remove the default outline without immediately providing a replacement that meets the contrast and size requirements of 2.4.13.