Frontend Index Return to the interactive index →
Production Engineering

Focus Management

How to move, contain, restore, and visibly communicate keyboard focus in dynamic web interfaces.

Last reviewed: September 2026

What it is

Focus management keeps keyboard focus aligned with what changed visually. It includes logical tab order, visible focus, intentional focus movement, containment for modal interfaces, and focus restoration.

Mental model

Focus is the keyboard user's cursor. When an interface changes context, ask where that cursor should be now and where it should return when the context closes.

Why it exists

Dynamic interfaces can add, remove, hide, or relocate content without naturally moving focus. Without coordination, users can become disoriented or interact with content behind an overlay.

When to use it

  • Opening and closing modal dialogs
  • Navigating client-rendered views
  • Adding validation summaries or asynchronous results
  • Removing the currently focused element

When not to use it

  • Avoid moving focus for minor updates that do not change context
  • Avoid positive tabindex values to manually script a tab order

Production considerations

  • Return focus to the opener when it still exists
  • Keep background content inert during modal interaction
  • Support Escape where dismissal is expected
  • Test with keyboard and screen readers

Accessibility implications

A logical focus order and visible focus indicator are WCAG requirements. Modal focus behavior also prevents users from reaching hidden background controls.

Primary documentation

Related Frontend Index entries