Focus Management

Users should always know where focus is — and get it back sensibly when overlays close.

01 — Purpose

Users should always know where focus is

Focus management controls how keyboard and assistive technology users move through your interface.

Focus is the cursor for keyboard and many assistive tech users. When it jumps randomly, disappears behind a dialog, or fails to return after an overlay closes, people lose orientation and abandon tasks.

Works closely with focus traps and the modal / dialog and accessible forms patterns.

02 — Principles

Predictable focus, visible state

Movement should follow user expectation — not implementation convenience.

  • focus moves intentionally on open, close, submit, and major state change
  • focus is always visible — high-contrast ring or equivalent
  • after overlays close, focus returns to a sensible element — usually the trigger
  • do not move focus for minor updates — use live regions instead

03 — Practice

Good focus management

Open, act, close, restore — the same choreography every time.

  • on dialog open: focus first focusable or the dialog heading container
  • on dialog close: restore to element that opened it — preserve task context
  • on form error: move focus to error summary or first invalid field — once, not on every keystroke
  • on route change in SPAs: move focus to h1 or main landmark
  • when removing the focused element from DOM: move focus to a logical neighbour first

04 — Avoid

Focus management failures

If users lose orientation, focus management is failing.

  • focus disappearing after close — landed on body with no indicator
  • unexpected jumps to top of page or unrelated widgets
  • focus remaining on content behind an open modal
  • auto-focus on page load to random promo banners — avoid unless user opted in

05 — Close

Choreograph the big moments

Focus moves matter most at open, close, error, and navigation.

Document focus rules for your design system: who moves focus, when, and where it returns. Inconsistent behaviour across modals and wizards is a common source of accessibility bugs.

Review with keyboard navigation, accessibility QA checklist, and accessibility standard.