Design Focus After Navigation
Accessibility · focus, navigation, keyboard
Updated 2026-07-28
- Understand what a client-side route change breaks. The browser normally resets focus and announces the new page, and a single-page app does neither unless you write it.
- Move focus to the new content on every route change. Without it, the next keyboard press continues from the link the user just activated, which is now part of a page that no longer exists.
- Prefer the page heading as the focus target. It names where the user has arrived, and it puts them at the start of the content rather than at the start of the navigation.
- Announce the new page title as well as setting it. Updating the document title alone is silent to most screen readers during in-app navigation.
- Handle the layers that sit on top of routing:
- Closing a modal returns focus to the control that opened it.
- Closing a drawer or menu does the same.
- Deleting a row moves focus to the next row, not to the top of the page.
- Expanding an accordion keeps focus on the toggle.
- Keep a skip link at the top of every page and make sure it actually moves focus, not just the scroll position.
- Never trap focus outside a modal. If a hidden menu is still focusable, keyboard users will tab into content they cannot see.
Route changes are the moment keyboard and screen reader users are most likely to get lost, so treat focus as part of the transition.
Related guides
UX Handbook