Focus visible

Historically the default indicator appeared on mouse clicks as well as on keyboard focus, which looked wrong to designers who had never navigated by keyboard.

The quickest fix was to suppress the outline entirely, which is a single declaration and removes the symptom completely.

It was copied between projects for years, and it appears in a great many stylesheets whose authors never made the decision themselves.

The removal is invisible to anyone testing with a mouse, which is most testing, so nothing surfaces it.

The result is a site where tabbing moves focus through the page with no indication of where it is.

The focus-visible selector matches only when the browser judges an indicator should be shown — keyboard interaction, not a mouse click.

Which resolves the conflict directly: the indicator appears for the people who need it and not in the situation that prompted the removals.

Browsers also apply this heuristic to their own default indicator now, so a modern default already behaves the way designers wanted.

Styling that selector rather than suppressing focus is the correct pattern, and it is no more work than the suppression was.

Where an older browser matters, styling both and letting the more specific rule win covers it.

Enough contrast against its own background to be seen, which falls under the non-text contrast threshold rather than the text one.

A visible area — a thin line in a colour close to the background technically exists and is not an indicator.

Coverage: the indicator must be visible for the whole focused element, not clipped by an ancestor with hidden overflow.

Consistency, so a keyboard user learns what to look for rather than re-learning on every component.

WCAG 2.2 added a criterion about how much of the indicator may be obscured, which is what catches a sticky header covering the focused element.

Opening a dialog without moving focus into it leaves a keyboard user still on the page behind, interacting with content they cannot see.

Closing it without returning focus to the trigger drops them at the top of the document.

Neither is visible to a static check, because both are behaviours rather than markup.

Which is why an indicator being present is a necessary condition rather than a sufficient one.

Served styles are read for suppression of the focus indicator, which is the unambiguous case.

Contrast of a replacement indicator falls under the non-text threshold and is computed where the colours can be resolved.

The tab order is read from the markup, including positive index values that reorder it globally.

Whether focus is managed correctly on dynamic content is behaviour under interaction and is outside any static reading.