Single-Page App (SPA) Route Transitions

In traditional multi-page websites, clicking a link triggers a full browser reload. The browser automatically resets focus to the top of the new document and announces the <title>.

In Single-Page Apps (React, Next.js, Vue), client-side routing updates the DOM dynamically without a page refresh.

The Blind Navigation Trap: If an app does not manage focus during route changes:

• The keyboard user clicks 'Profile', the URL changes, and new content appears.
• But focus remains trapped on the clicked link in the header or gets lost in the body.
• Screen readers stay completely silent, leaving blind users wondering if the click worked.

The Fix: On route change, update document.title, move programmatic focus to the new page's <h1> (using tabindex="-1"), or announce the new page name via an aria-live region.