Accessible Focus Indicators

Last updated:

Focus indicators help users understand current keyboard position — users should never lose track of focus.

01 — Purpose

Show where keyboard focus is

Focus indicators help users understand current keyboard position — without them, navigation is guesswork.

Keyboard and assistive technology users move through focusable elements in sequence. A visible, consistent focus indicator answers “where am I?” on every step. Hiding focus for aesthetics removes that answer.

See keyboard navigation, focus management, and CSS standard interaction expectations.

02 — Principles

Focus must be visible and consistent

High visibility, sufficient contrast, and the same language across components.

  • high visibility — focus ring or underline users can see at a glance
  • sufficient contrast against background — meet focus visibility requirements, not only text contrast
  • consistent appearance — same focus treatment on links, buttons, and custom controls
  • respect :focus-visible — show strong focus for keyboard, avoid noisy rings on every mouse click where appropriate

03 — Practice

Good focus indicators

Design focus as part of the component — not an afterthought.

  • use :focus-visible with clear outline, box-shadow, or underline — test Tab through the page
  • ensure focus is visible on dark, tinted, and hero backgrounds — not only on white cards
  • match focus style in design tokens — ring colour, width, offset
  • custom widgets must expose focus — see ARIA usage and modal / dialog

04 — Avoid

Invisible or inconsistent focus

Users should never lose track of focus position.

  • invisible focus states — outline: none without a replacement
  • removing outlines entirely site-wide for a “clean” look
  • focus styles that only appear on hover — keyboard users never see them
  • low-contrast rings on brand-coloured backgrounds — pink on pink, grey on grey

05 — Close

Never lose the cursor

If you cannot see focus while tabbing, neither can your users.

Tab through every new component in review. If focus disappears, fix it before merge — do not defer to “we will polish later.”

See colour and contrast systems, motion standards, and CSS code review checklist.