zero·style

Dictionary entry

focus indicator

View related-term graphUse in a brief
Was this helpful?
Graphic designCurated · verified

The visible outline or highlight that shows which button, link, or field is currently selected when someone moves around a page with the keyboard instead of a mouse. Without it, keyboard users can't tell where they are.

Synonyms

  • focus ring
  • focus outline
  • focus state

Related terms

In plain words

  • the box that shows where you are when tabbing with the keyboard
  • the highlight around the selected button

Usage example

Designers removed the default focus indicator for looks, accidentally leaving keyboard users lost.

Don't confuse with…

  • hover stateA hover state responds to the mouse pointer resting on something; a focus indicator shows the current keyboard position and works without a mouse.

Categories

  • Accessibility

Related-term graph

Two hops from focus indicator — click a term to open its entry, or re-center the graph on it

Focus term

Directly related

Two hops away

  • Relatedfocus indicator related of keyboard navigation
  • Relatedfocus indicator related of non-text contrast
  • Relatedfocus indicator related of reading order
  • Relatedfocus indicator related of skip link
  • Relatednon-text contrast related of color-blind safe palette
  • Relatednon-text contrast related of color contrast ratio
  • Relatedreading order related of focus indicator
  • Relatednon-text contrast related of focus indicator
  • Relatedkeyboard navigation related of focus indicator
  • Relatedkeyboard navigation related of focus order
  • Relatedkeyboard navigation related of focus trap
  • Relatedskip link related of keyboard navigation
  • Relatedreading order related of keyboard navigation
  • Relatedskip link related of reading order
  • Relatedskip link related of screen reader
  • Relatedreading order related of screen reader
  • Relatedkeyboard navigation related of skip link
  • Relatedskip link related of visually hidden text

Stop describing. Start naming.

Turn a plain-language description into a designer-ready brief in minutes.

Start a brief