Focus State

The visible indication that an element is selected via keyboard or assistive tech, such as an outline or ring, essential for accessible navigation.

Why it matters

For keyboard users the focus ring is the cursor — remove it and they are navigating blind. The old habit of outline: none is an accessibility failure with a modern fix: style the ring, never delete it.

See it

The same button focused three ways. Style the ring; never delete it.

The numbers

:focus-visible — rings for keyboard focus, not mouse clicks
3:1 — minimum contrast for the indicator (WCAG 2.2)

Related terms

ARIA
Keyboard Navigation
Motion
Tooltip

Ask your assistant

Define "Focus State" using uxspot.

Works in Claude, Cursor or any MCP client — connect the uxspot MCP.

Think it stuck? A 20-second round of Spot Check will tell you.