Focus indicator

Definition

A focus indicator is the visible cue around or within the element that currently has keyboard focus. It lets a person track where Enter, Space, typing, or other keyboard commands will apply. Browser outlines provide a useful baseline.

Styling

:focus-visible can apply a strong custom outline when the browser determines a visible indicator is needed, while avoiding unnecessary pointer-only styling. Do not remove outline unless an equally visible replacement exists. An outline often survives layout and forced-color changes better than a subtle shadow.

Failure modes

The indicator may be clipped by overflow, hidden behind a sticky region, blend into one theme, or appear only as a color change. Programmatic focus can also land on an offscreen or inert element, producing an indicator nobody can find.

Review question

Can you Tab and Shift+Tab through every task without losing the active point? Test light and dark surfaces, forced colors, 200% zoom, narrow reflow, validation errors, menus, dialogs, and sticky headers. Confirm the indicator moves in a logical focus order and remains visible on every interactive state, not only the default button example.

Check custom controls and elements focused after script updates, not only native links and buttons. If the interface moves focus, the destination should be intentional, perceivable, and described by nearby content rather than appearing as an unexplained jump.