Design Nomenclature / Systems & Spec

Focus indicator

Also called focus ring, focus visible, SC 2.4.7

The visible marker showing which control holds keyboard focus. WCAG 2.0 SC 2.4.7 (AA) requires only that some mode of focus is visible. WCAG 2.2 adds SC 2.4.11 Focus Not Obscured at AA, and SC 2.4.13 Focus Appearance at AAA, which sets a minimum indicator area and 3:1 contrast between focused and unfocused states.

A two-column comparison of the two focus criteria. Left, Focus Visible — WCAG 2.0 success criterion 2.4.7 at Level AA — which requires only that some mode of focus is visible, specifying no size, contrast, or shape, so a one-pixel hairline passes. Right, Focus Appearance — success criterion 2.4.13, added at Level AAA in WCAG 2.2 — which adds a minimum indicator area and requires 3:1 contrast between the focused and unfocused states of the same pixels.

In practice

Deleted with `outline: none` far more often than it is designed. The browser default is ugly and load-bearing; replacing it is fine, removing it is a failure.

Not to be confused with

How this term connects

LabelLevel AANon-text contrastSemantic markupTarget sizeFocus indicator
Related Confused with