WCAG 2.4.7 Focus Visible

Success Criterion 2.4.7 requires that any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible. It's a Level AA criterion under Guideline 2.4 (Navigable).

Why a visible focus indicator matters

A keyboard user navigating by Tab has no mouse cursor to show them where they are — the only signal is the browser's focus outline (or a custom equivalent) around the currently-focused element. Without it, a keyboard-only user is essentially operating blind: they can move focus and trigger actions, but have no way to see which element they're about to activate before pressing Enter.

The most common way this fails

outline: none or outline: 0 applied broadly in CSS, usually to remove the browser's default focus ring for aesthetic reasons, with no replacement style provided. This is an extremely common pattern in design systems that prioritize visual polish without realizing the default outline was doing real accessibility work, not just adding unwanted visual clutter.

/* Removes the focus indicator entirely — a violation with no replacement */
button:focus {
  outline: none;
}

/* Removes the default but replaces it with a deliberate, visible alternative */
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

The :focus vs :focus-visible distinction

Modern CSS's :focus-visible pseudo-class specifically targets focus that arrived via keyboard (or other non-pointer means), leaving mouse-click focus states unstyled — this satisfies a common design goal ("I don't want a focus ring on mouse click, only from keyboard navigation") without accidentally removing the indicator keyboard users actually depend on. Using :focus-visible instead of unconditionally removing :focus styling entirely is the standard modern fix for teams who found the default outline visually unwanted on mouse interaction specifically.

What a compliant focus indicator needs

It doesn't have to be the browser's default blue outline — any custom style works, as long as it's clearly visible against the surrounding page (satisfying Non-text Contrast's 3:1 minimum) and clearly distinguishes the focused element from its unfocused state.