AccessibilityCraft conventionAdvanced

Focus Management

Deliberately moving focus when the interface changes, so keyboard and screen reader users are not stranded.

Definition

Focus management is the practice of directing keyboard focus in response to interface changes: opening dialogs, navigating in a single-page application, revealing content and handling errors.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page

Definition
Where focus should go
Rules
Continue from here

Where focus should go

Event	Focus destination
Dialog opens	The dialog, usually its heading or first control. Trap focus inside.
Dialog closes	Back to the element that opened it.
Route change in a single-page app	The main heading of the new view, or a dedicated announcer region.
Form submitted with errors	The error summary, or the first invalid field.
Content expanded in place	Usually stays on the trigger, with aria-expanded updated.
Item deleted from a list	The next item, or the list container if it is now empty.

Rules

Move focus only in response to a user action, never spontaneously.
Do not move focus while someone is typing.
Trap focus only in modal contexts, and always provide Escape.
When focusing a non-interactive element such as a heading, give it tabindex -1 rather than making it tabbable.
Never leave focus on an element that has been removed from the DOM.

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Checkout A Search Experience An Enterprise Workflow An Onboarding Flow Authentication

Relied on by

Entries that assume this is already in place.

Drawer and SheetComponent
Modal DialogComponent
PopoverComponent
Input ValidationPattern

Often used with

These usually appear in the same screen or the same decision.

StarkTool

Commonly confused with

Close enough to be mixed up, different enough to matter.

Focus IndicatorsAccessibility
One is whether focus can be seen. The other is where focus goes when the interface changes.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.

Keyboard NavigationAccessibility
Screen ReadersAccessibility
Status Messages and Live RegionsAccessibility
ElevationUI foundation
Figure and GroundUI foundation