:focus-visible

A focus ring for keyboards only

Caveat:focus { outline: none } is the most common accessibility bug on the web, and it looks like a tidy-up. It takes the ring from keyboard users, the only people who needed it.

FallbackEngines that do not know the selector skip the rule and keep the default ring on every focus. Noisier, still usable.

/* never: button:focus { outline: none } */
button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #6fa8dc;
  outline-offset: 2px;
}

Published 14 Aug 2026