Focus management on route change

In the old days of "real" page loads, every link click ripped the page down and built a fresh one. The browser moved focus back to the top automatically, the screen reader started reading the new page, and life was simple.

Single-page apps (SPAs) — apps that swap content without a full reload — broke that. The URL changes, the content changes, but the browser sees no navigation: focus stays where it was. A keyboard user who clicked "Settings" in the nav now has focus stuck inside the nav. A screen reader user hears nothing — no announcement that the page changed.

This lesson is about putting that lost behavior back, by hand. It's a small bit of code that distinguishes accessible apps from ones that fail keyboard users on every navigation.

What the browser does on a real navigation

When a <a href> triggers a full page load, the browser:

1. Tears down the old DOM.
2. Builds the new one.
3. Moves focus to the top of the new page.
4. Updates assistive tech: screen readers announce the new title, the new heading, the new landmarks.

Step 3 is what we lose. Steps 4 happens because of step 3 — when focus moves into a freshly-rendered region, screen readers describe that region. No focus move, no announcement.

What an SPA breaks

Imagine a typical Next.js, React Router, or Vue Router app. The user is on / and presses Tab until they reach the "Settings" link in the nav. They activate it. The router replaces the main content with the Settings page.

Now press Tab again. Where does focus go?

It goes to whatever was after the Settings link in the original nav. Because the nav didn't change. From the browser's point of view, you just pressed a button, didn't move, and now you're tabbing through the rest of the nav. The user has to tab all the way out of the nav before reaching anything new on the page.

For a screen-reader user, it's worse: nothing was announced. They have no idea the navigation succeeded.

The standard fix

Pick a target on the new page, give it tabindex="-1", and call .focus() on it after the route renders.

import { useEffect, useRef } from "react";

export function usePageFocus() {
const ref = useRef<HTMLHeadingElement>(null);

useEffect(() => {
  // Move focus to the heading after the new page mounts.
  ref.current?.focus();
}, []);

return ref;
}

export default function SettingsPage() {
const headingRef = usePageFocus();

return (
  <main>
    <h1 ref={headingRef} tabIndex={-1}>Settings</h1>
    {/* ... */}
  </main>
);
}

What's happening:

• tabIndex={-1} makes the heading programmatically focusable without adding a tab stop. Tab still flows through the page normally; the heading is just reachable by JS.
• The effect fires after the new page commits. Focus moves there. The screen reader notices and starts reading from the heading.
• The user's next Tab press now moves into the new page's content, not the leftover nav.

In Next.js (App Router), the same pattern works inside app/.../page.tsx. The page is a Server Component, so wrap the focus logic in a small 'use client' component — a <RouteFocusHeading>{title}</RouteFocusHeading> — and let the server pass the title in.

Where to send focus

You have a few options for the target. In rough order of preference:

• The page's <h1>. This is the most common and usually the best. The heading describes the page, the screen reader reads it, the user gets oriented immediately.
• The <main> landmark. Slightly less informative — the screen reader will announce "main, region" rather than the page title. Use this when the page has no single obvious heading.
• A skip link, again. A few apps focus the skip link itself on every navigation. This works but feels like a hack — you've made the user press Tab again to do anything.
• A live region announcement. For routes that don't visually change much (think, applying a filter), an aria-live region saying "Filtered to 12 results" is sometimes better than moving focus. Different tool.

What you should not do is leave focus where it was, or send it to the body, or send it to the document. Those all produce silence and confusion.

Try it yourself