Focus Styles & Keyboard Navigation

A visible focus indicator is not decoration — for anyone navigating by keyboard, switch device, or voice control, it is the only way to know where they currently are on the page. A mouse user sees their cursor; a keyboard user has to see the focus ring, or they are effectively navigating blind.

NEVER remove outline without replacing it

Writing `*:focus { outline: none; }` — or any variant that strips the outline without providing an equally visible replacement — is one of the most damaging and, unfortunately, most common accessibility mistakes in CSS. It doesn't just look worse: it makes a site genuinely unusable for anyone who can't use a mouse. If you take away the default outline, you are responsible for supplying a focus style that is at least as visible.

The old problem: focus rings on every click

The reason developers reached for outline: none in the first place is understandable: the default focus ring used to appear on every interaction, including a plain mouse click, which many designers found visually noisy. The right fix for that problem was never to delete focus styling altogether — it was to show it selectively.

:focus-visible — the actual fix

The :focus-visible pseudo-class (see :focus-visible & :focus-within for the full details) lets the browser decide when a focus indicator is actually useful — generally for keyboard and other non-pointer interaction — and applies your style only then. A mouse click that focuses a button doesn't trigger :focus-visible, but pressing Tab to reach that same button does.

CSS

/* Remove the outline only where you're replacing it with something
   deliberately designed — never remove it with nothing in its place */
button {
  outline: none;
}

/* Restore a clear, custom ring specifically for keyboard interaction */
button:focus-visible {
  outline: 3px solid #2a6df4;
  outline-offset: 2px;
}

/* Mouse clicks stay visually clean — no ring on a plain :focus that
   isn't also :focus-visible */

Designing a focus style that's actually visible

A focus ring that technically exists but is too thin, too low-contrast, or the wrong color against its background fails the same users a missing ring does. Treat the focus indicator itself as something that needs to pass the same bar as any other important content — see Color Contrast & Readability for the numeric thresholds. A generally safe baseline: at least a 2px outline, offset slightly from the element so it doesn't get swallowed by the element's own border, in a color with strong contrast against both the element and its surrounding background.

CSS

:focus-visible {
  outline: 3px solid #2a6df4;
  outline-offset: 2px;
  border-radius: 4px; /* optional, to match rounded elements */
}

/* On a dark background, the same blue may not have enough contrast —
   adjust per-context rather than assuming one color works everywhere */
.dark-panel :focus-visible {
  outline-color: #8ab4ff;
}

Note

Using `outline` (rather than `border` or `box-shadow`) for focus styling has a practical advantage: outlines don't affect layout — they're drawn outside the box without shifting surrounding content — and `outline-offset` lets you push the ring away from a tight-fitting border so both remain visible.

Read the full behavior of the selector on [:focus-visible & :focus-within](/css/focus-visible), and verify your ring passes contrast requirements on [Color Contrast & Readability](/css/color-contrast).