Gestire i cambi di route senza ricaricare la pagina
Annunciare la navigazione e spostare il focus al cambio di route
Gestire i cambi di route senza ricaricare la pagina è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Il problema della navigazione silenziosa
In una SPA, facendo clic su un collegamento si sostituisce il contenuto senza un ricaricamento completo. Per uno screen reader non sembra accadere nulla, quindi rimane silenzioso sulla nuova pagina. 🤫
Perché i ricaricamenti completi erano semplici
Il caricamento di una pagina reale reimposta il focus e fa leggere allo screen reader il nuovo titolo. Il routing lato client salta tutti questi passaggi, quindi deve ricreare autonomamente questi segnali.
Aggiorni il titolo del documento
A ogni cambio di route, imposti document.title in modo che corrisponda alla nuova vista. Molti screen reader leggono il titolo quando cambia, aiutando gli utenti a orientarsi.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Sposti il focus durante la navigazione
Dopo il routing, sposti il focus all'inizio del nuovo contenuto, di solito sul titolo principale. In questo modo comunica agli utenti da tastiera e agli utenti di screen reader che la pagina è cambiata.
Porti il focus sul titolo o sul contenuto principale
Assegni al destinatario un tabindex of -1, così può ricevere il focus tramite script senza entrare nell'ordine di tabulazione. Poi chiami .focus() al termine dell'aggiornamento della route.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Annunci con una live region
Un'alternativa consiste in una live region visivamente nascosta, da riempire con un testo come Navigated to Settings. Lo screen reader lo pronuncia senza spostare il focus.
<div aria-live="polite" className="sr-only">{message}</div>Scelga una sola strategia, non entrambe
Spostare il focus e fare un annuncio in una regione live funzionano entrambi. Farlo contemporaneamente può causare annunci duplicati, quindi scelga un solo approccio per app e lo usi in modo coerente.
Il tempismo conta
Esegua lo spostamento del focus o l'annuncio dopo il rendering della nuova vista. In React, un effect che dipende dal percorso della route viene eseguito una volta aggiornato il DOM.
Non sposti bruscamente il focus durante un'attività
Sposti il focus solo in caso di un effettivo cambio di route, non per aggiornamenti minori nella stessa pagina. Sottrarre il focus mentre qualcuno sta eseguendo un'azione è destabilizzante e confonde.
Le librerie di routing possono aiutare
Alcuni router espongono hook per i cambi di route. React Router mette a disposizione useLocation, così un effect può reagire ogni volta che il percorso cambia davvero.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Esegua i test come un utente
Attivi uno screen reader, faccia clic sulla navigazione e ascolti. Se i cambi di route vengono annunciati e il focus viene posizionato in modo sensato, la navigazione della SPA è accessibile.
Controllo rapido
Un utente di screen reader fa clic su un link di una SPA, ma non sente alcun cambiamento. Qual è la causa più probabile?
Riepilogo: annunci la route
La navigazione di una SPA è invisibile finché non la rende udibile. Aggiorni il title, quindi sposti il focus o usi una regione live, in modo che tutti sappiano che la pagina è cambiata. ✅
Domande Frequenti
La lezione «Gestire i cambi di route senza ricaricare la pagina» è gratuita?
Sì — il testo completo di «Gestire i cambi di route senza ricaricare la pagina» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Gestire i cambi di route senza ricaricare la pagina»?
Annunciare la navigazione e spostare il focus al cambio di route Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Gestire i cambi di route senza ricaricare la pagina»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gestire i cambi di route senza ricaricare la pagina
- Gestire il focus con refs e useEffect
- Fragment, Portal e il problema dell'ordine nel DOM
- jsx-a11y e protezioni a livello di componente