Routenwechsel ohne Neuladen der Seite
Kündigen Sie die Navigation an und verschieben Sie den Fokus beim Routenwechsel.
Routenwechsel ohne Neuladen der Seite ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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. ✅
Häufig gestellte Fragen
Ist die Lektion „Routenwechsel ohne Neuladen der Seite“ kostenlos?
Ja — der vollständige Text von „Routenwechsel ohne Neuladen der Seite“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Routenwechsel ohne Neuladen der Seite“?
Kündigen Sie die Navigation an und verschieben Sie den Fokus beim Routenwechsel. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Routenwechsel ohne Neuladen der Seite“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Routenwechsel ohne Neuladen der Seite
- Fokus mit Refs und useEffect verwalten
- Fragments, Portals und die Falle der DOM-Reihenfolge
- jsx-a11y und Prüfungen auf Komponentenebene