Focus management for modal dialogs and single-page navigation

Screen reader users and keyboard navigators get lost when modals open, pages change in a SPA, or content dynamically updates. Focus stays on the trigger button behind a modal, or remains at the top of a new page's DOM.

(1) Modals: move focus to the first focusable element inside the modal on open. Trap focus inside the modal (Tab should cycle within it). Return focus to the trigger element on close. Use role='dialog' and aria-modal='true'. (2) SPA navigation: move focus to the main content heading or a skip link on route change. Use aria-live='polite' on a visually-hidden element to announce page changes. (3) Dynamic content: use aria-live regions for updates that don't move focus. (4) Use the native dialog element — it handles focus trapping automatically.

Sighted users visually scan the page to understand context changes. Screen reader users rely on focus position and announcements. Without focus management, assistive technology users lose their place on every interaction.