Chapter 6 · Practice 3 of 4
Move focus deliberately when content changes
From Accessibility
Why it matters
Keyboard and screen reader users follow focus. When content changes and focus does not, they lose their place.
- Dialogs: when one opens, focus moves into it and stays there until it closes, then returns to the button that opened it.
- Client-side navigation: move focus to the new page heading or main region so users know the page changed.
- Custom widgets: use a ref and call
focus()in the event handler that opens them.
Avoid
- Removing focus outlines with
outline: nonewithout a visible replacement