Route Changes Without Page Reloads
Announce navigation and move focus on route change.
Route Changes Without Page Reloads is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Silent Navigation Problem
In a SPA, clicking a link swaps content without a full reload. To a screen reader, nothing seems to happen, so it stays silent about the new page. 🤫
Why Full Reloads Were Easy
A real page load resets focus and makes the screen reader read the new title. Client-side routing skips all of that, so you must recreate those cues yourself.
Update the Document Title
On every route change, set document.title to match the new view. Many screen readers read the title when it changes, giving users their bearings.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Move Focus on Navigation
After routing, send focus to the top of the new content, usually the main heading. This tells keyboard and screen reader users the page has changed.
Focus the Heading or Main
Give the target a tabindex of -1 so it can receive focus by script without joining the tab order. Then call .focus() on it after the route updates.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Announce With a Live Region
An alternative is a visually hidden live region that you fill with text like Navigated to Settings. The screen reader speaks it without moving focus.
<div aria-live="polite" className="sr-only">{message}</div>Pick One Strategy, Not Both
Moving focus and announcing in a live region both work. Doing both at once can cause double announcements, so choose one approach per app and stay consistent.
Timing Matters
Run your focus or announcement after the new view renders. In React, an effect that depends on the route path fires once the DOM is updated.
Do Not Yank Focus Mid-Task
Only move focus on a genuine route change, not on minor in-place updates. Stealing focus while someone is mid-action is jarring and confusing.
Router Libraries Can Help
Some routers expose hooks for route changes. React Router gives you useLocation, so an effect can react every time the path actually changes.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Test It Like a User
Turn on a screen reader, click through your nav, and listen. If route changes are announced and focus lands sensibly, your SPA navigation is accessible.
Quick Check
A screen reader user clicks a SPA link but hears nothing change. What is the most likely cause?
Recap: Announce the Route
SPA navigation is invisible until you make it heard. Update the title, then move focus or use a live region so everyone knows the page changed. ✅
Frequently asked questions
Is the “Route Changes Without Page Reloads” lesson free?
Yes — the full text of “Route Changes Without Page Reloads” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Route Changes Without Page Reloads”?
Announce navigation and move focus on route change. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Route Changes Without Page Reloads” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Route Changes Without Page Reloads
- Managing Focus With Refs and useEffect
- Fragments, Portals, and the DOM Order Trap
- jsx-a11y and Component-Level Guardrails