Gérer les changements de route sans recharger la page
Annoncez la navigation et déplacez le focus lors d'un changement de route.
Gérer les changements de route sans recharger la page est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. ✅
Questions Fréquemment Posées
La leçon « Gérer les changements de route sans recharger la page » est-elle gratuite ?
Oui — le texte complet de « Gérer les changements de route sans recharger la page » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer les changements de route sans recharger la page » ?
Annoncez la navigation et déplacez le focus lors d'un changement de route. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Gérer les changements de route sans recharger la page » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Gérer les changements de route sans recharger la page
- Gérer le focus avec les références et useEffect
- Fragments, portails et piège de l'ordre du DOM
- jsx-a11y et garde-fous au niveau des composants