• 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

Related scenarios