The oldest fight in CSS: mouse users hate the focus ring showing on every click, keyboard users die without it. The browsers solved the judgment call itself with the focus-visible pseudo-class: it matches keyboard-style focus and skips mouse-style focus.

/* default: remove only for pointer focus, not for keyboard */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

The three rules

  • Never remove the visible indicator for keyboard users: with focus-visible, removing the ring and replacing it by hand gives full design control.
  • The browser chooses the heuristic: focus-visible matches for keyboard navigation, mixed to skip mouse clicks on most interactions.
  • Every focused control still needs its ring: focus-visible fits the ring, it does not create focus behavior.

One subtle part to respect

Programmatic focus: the focus() call on a link skip or on an error message target. Browsers differ on whether such focus is visible; define the interaction in your stylesheet explicitly and test once with tab and once by clicking, prefer visible for both if in doubt. A missed ring on a skip link is a screen reader report, not a design accident.

This site keeps the platform default ring, tuned with one clear brand color. WCAG 2.2 made visible focus an explicit success criterion; the pseudo-class that makes both audiences happy is gacor and older than the controversy it solves.