Skift mellem ruter uden genindlæsning af siden
Annoncér navigationen, og flyt fokus ved skift af rute.
Skift mellem ruter uden genindlæsning af siden er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Problemet med den tavse navigation
I en SPA udskifter et klik på et link indholdet uden en fuld genindlæsning. For en skærmlæser ser det ud, som om intet sker, så den forbliver tavs om den nye side. 🤫
Hvorfor fulde genindlæsninger var nemme
Ved en rigtig sideindlæsning nulstilles fokus, og skærmlæseren læser den nye titel op. Klientside-routing springer alt dette over, så du selv skal genskabe disse signaler.
Opdatér dokumentets titel
Ved hver ændring af rute skal du sætte document.title, så den passer til den nye visning. Mange skærmlæsere læser titlen op, når den ændres, hvilket hjælper brugerne med at orientere sig.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Flyt fokus ved navigation
Efter routing skal du sende fokus til toppen af det nye indhold, normalt hovedoverskriften. Det fortæller tastatur- og skærmlæserbrugere, at siden er ændret.
Sæt fokus på overskriften eller hovedindholdet
Giv målet en tabindex på -1, så det kan få fokus via et script uden at indgå i tab-rækkefølgen. Kald derefter .focus() på det, efter ruten er opdateret.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Annoncér med et liveområde
Et alternativ er et visuelt skjult liveområde, som du udfylder med tekst som Navigated to Settings. Skærmlæseren læser teksten op uden at flytte fokus.
<div aria-live="polite" className="sr-only">{message}</div>Vælg én strategi, ikke begge
Både flytning af fokus og annoncering i en live-region fungerer. Hvis du gør begge dele på én gang, kan det give dobbelte annonceringer, så vælg én tilgang pr. app, og vær konsekvent.
Timing er vigtig
Kør din fokusflytning eller annoncering efter, at den nye visning er blevet gengivet. I React kører en effekt, der afhænger af rutestien, når DOM'en er blevet opdateret.
Flyt ikke fokus midt i en opgave
Flyt kun fokus ved et reelt rutebytte, ikke ved mindre opdateringer på samme side. Det virker forstyrrende og forvirrende at stjæle fokus, mens nogen er midt i en handling.
Routerbiblioteker kan hjælpe
Nogle routere stiller hooks til rådighed ved rutebytter. React Router giver dig useLocation, så en effekt kan reagere, hver gang stien rent faktisk ændres.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Test det som en bruger
Aktivér en skærmlæser, klik dig gennem din navigation, og lyt. Hvis rutebytter bliver annonceret, og fokus placeres fornuftigt, er din SPA-navigation tilgængelig.
Hurtigt tjek
En skærmlæserbruger klikker på et SPA-link, men hører ikke, at noget ændrer sig. Hvad er den mest sandsynlige årsag?
Opsummering: Annoncér ruten
SPA-navigation er usynlig, indtil du gør den hørbar. Opdatér titlen, og flyt derefter fokus, eller brug en live-region, så alle ved, at siden er ændret. ✅
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Skift mellem ruter uden genindlæsning af siden” gratis?
Ja — hele teksten til “Skift mellem ruter uden genindlæsning af siden” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Skift mellem ruter uden genindlæsning af siden”?
Annoncér navigationen, og flyt fokus ved skift af rute. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Skift mellem ruter uden genindlæsning af siden”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skift mellem ruter uden genindlæsning af siden
- Håndtér fokus med refs og useEffect
- Fragments, Portals og fælden med DOM-rækkefølgen
- jsx-a11y og værn på komponentniveau