Skip to content
UX Atlas
AccessibilityCraft conventionFoundational

Focus Indicators

The visible marker showing where keyboard focus is, which must never be removed.

Definition

WCAG 2.4.7 requires a visible focus indicator. WCAG 2.2 adds 2.4.11, requiring that focus is not obscured, and 2.4.13, setting minimum size and contrast for the indicator itself.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. A focus style that meets the requirements
  3. Requirements
  4. Sources
  5. Continue from here

A focus style that meets the requirements

css
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Never do this without an equally visible replacement */
/* *:focus { outline: none; } */

/* Sticky headers must not obscure the focused element (WCAG 2.4.11) */
:root { scroll-padding-block-start: var(--header-height); }

focus-visible shows the indicator for keyboard interaction without showing it on mouse clicks, which removes the usual reason teams delete it.

Requirements

  • At least 3:1 contrast against the adjacent background, in both themes.
  • Thick enough to see: a 2px outline with a 2px offset is a reliable default.
  • Visible against every background the element can appear on.
  • Not obscured by sticky headers, footers or overlays.
  • Present on custom controls, which do not get it automatically.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A FormA Mobile AppNavigation

Depends on

Get these right first, or this one will not hold.

  • Keyboard NavigationAccessibility

    Keyboard access without a visible focus ring is technically operable and practically unusable.

Relied on by

Entries that assume this is already in place.

Commonly confused with

Close enough to be mixed up, different enough to matter.

  • Focus ManagementAccessibility

    One is whether focus can be seen. The other is where focus goes when the interface changes.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.