- Success Criterion 4.1.3
- Conformance level AA
Single-Page App Route Change With No Announcement at All
4.1.3 — Status Messages
Scenario
Setting
A professional networking site's profile editor
What’s wrong
single-page app route/page change producing no announcement and no focus-management signal that the view changed.
Example
<nav>
<a href="#" onclick="loadPanel('experience')">Experience</a>
<a href="#" onclick="loadPanel('education')">Education</a>
</nav>
<main id="panel"><!-- content swapped via JS, document.title unchanged,
focus stays on the last-clicked link --></main> Why it matters
A screen reader user clicking "Education" hears nothing change and has to explore the page again to notice the switch.
How to test
Navigate to a new view in a single-page app with a screen reader running: if there's no announcement and no focus-management signal that the page changed, it fails.
How to fix
The loadPanel function should render the new panel, update document.title, write the new section's name into the route announcer, and then move focus to the panel so both sighted and screen reader users get confirmation the view actually changed.
<main id="panel" tabindex="-1"><!-- content swapped via JS --></main>
<div role="status" aria-live="polite" class="visually-hidden" id="routeAnnouncer"></div> Outcome
A user hears "Education panel loaded" and starts editing that section right away.
Who is affected
Screen reader users navigating the profile editor's sections get no cue that the visible panel actually changed.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Status Update Shown Visually but Never Wired for Screen Readers
- Cart Confirmation Toast With No Live Region Announcement
- Search Result Count That Updates Silently on Every Filter
- Autosave ‘Saved’ Indicator With No Live Announcement
- Loading Spinner With No Programmatic Busy or Status State
- Error Toast With No Alert Role and No Focus Movement