Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Focus Indicator

focus-indicator

Add to comparison +
Microinteractions & feedbackScope: State / detailfocus-indicator · v0.1.0

When an interface element receives keyboard focus, a visible visual marker (such as an outline ring or highlight) shows where focus currently is, so keyboard users always know where their action will land.

Illustration · Editorial artwork, no interactive specimen yet
On a fictional FIELDNOTES form toolbar, one button in a row is surrounded by a thick, high-contrast focus ring while the other buttons keep a plain default style.
On a fictional FIELDNOTES form toolbar, one button in a row is surrounded by a thick, high-contrast focus ring while the other buttons keep a plain default style.

Recognizing it

  • The element with keyboard focus differs visibly from its neighbors
  • The indicator stays visible while focus remains and does not fade out on its own
  • The indicated area is not entirely covered by sticky headers, overlays, or other author content

Concept boundary

A focus indicator only answers where focus is now. It is not the hover, selected, or active state; it is a state style on an element rather than a separate component, and it does not decide where focus should move.

When to consider it

  • The interface can be operated with a keyboard or other non-pointer input
  • Buttons, links, or form controls have custom styling that overrides browser defaults
  • The page has sticky headers, footers, or non-modal overlays that could cover the focused element

When to be cautious

  • Do not remove the default outline for aesthetics without providing an equivalent
  • Do not substitute an effect that appears only on hover or fades quickly for a persistent focus indicator
  • Do not make the focus indicator identical to the selected style, leaving users unable to tell position from selection

Tradeoff

A prominent focus ring can clash with brand visuals, but showing it only for keyboard input via :focus-visible keeps keyboard access while sparing mouse users an unwanted outline.

Conditional rules · Editorial advice

When An element receives keyboard focusMustShow a persistently visible focus indicator and ensure it is not entirely covered by sticky headers, footers, or overlays.
When You want to drop the browser's default outlineMustNever write outline: none alone; provide an equivalent indicator with sufficient contrast at the same time, preferably via :focus-visible.
When Designing a custom focus styleRecommendedTreat SC 2.4.13's 2 CSS pixel perimeter and 3:1 contrast change as the target, even if AA is the compliance baseline.

Related entries

Modal Dialog ↗Works with · A dialog opens and moves focus inside it

After focus is moved programmatically, a visible indicator is the only way users know they are now inside the dialog.

Inclusive Design ↗Explains · Serving keyboard, switch, or low-vision users

Visible focus is a precondition for these users to complete tasks, not a decoration.

Glassmorphism ↗Conditional conflict · Translucent blurred backgrounds leave too little contrast between outline and background

A focus ring must keep enough contrast against the actual background; blurred translucent surfaces can weaken it.

Sources and what they support

W3C WAI · Understanding SC 2.4.7 Focus Visible (Level AA) ↗

WCAG 2.2 SC 2.4.7 (Level AA) requires that any keyboard-operable interface has a mode of operation where the keyboard focus indicator is visible; using the platform default focus indicator is one sufficient technique.

Retrieved: 2026-09-15
W3C WAI · Understanding SC 2.4.11 Focus Not Obscured (Minimum) (Level AA) ↗

WCAG 2.2 SC 2.4.11 (Level AA) requires that a component receiving keyboard focus is not entirely hidden by author-created content such as sticky headers, footers, or non-modal dialogs.

Retrieved: 2026-09-15
W3C WAI · Understanding SC 2.4.13 Focus Appearance (Level AAA) ↗

WCAG 2.2 SC 2.4.13 (Level AAA) requires the focus indicator area to be at least a 2 CSS pixel thick perimeter of the component, with at least 3:1 contrast between the same pixels in focused and unfocused states.

Retrieved: 2026-09-15
MDN · :focus-visible ↗

:focus-visible matches when an element has focus and the browser's input heuristics determine focus should be shown; use it to provide a custom indicator rather than removing focus styles with outline: none.

Retrieved: 2026-09-15 · Archived 2025-10-30

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no operable specimen yet; the illustration is an editorial sketch. When applied to a product, tab through the page with a keyboard to verify that every focusable element type shows a visible, sufficiently contrasting indicator that is not covered by fixed content.

{
  "states": [
    "unfocused",
    "focus-visible",
    "focus-hidden"
  ],
  "a11y": [
    "The focus indicator is always visible and unobscured during keyboard use",
    "A custom indicator contrasts sufficiently with the background and the unfocused state",
    "Focus, selected, and hover states are distinguishable"
  ],
  "motion": "The indicator should appear immediately; any optional fade-in is omitted under reduced motion"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.