Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 5 OF 6 · Dynamic updates

Route change in SPA

Navigate inside an app and check whether title, heading, and focus update after the route changes.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Determine whether single-page navigation creates a clear new page context for assistive technology.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Activate Reports. Listen for the new route context and check where focus lands.

Dashboard

Account activity summary.

Expected behavior: the route change creates a clear new context through focus, heading, and title/status updates.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Activate Reports. Determine whether the change is obvious without sight.

Dashboard

Account activity summary.

Hint

If focus stays on the old control and no route context is announced, the user may not know the page changed.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective route change?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective SPA route changes content visually but leaves screen reader context behind. Focus, heading, title, or status messaging do not communicate the new page.

Repair

After client-side navigation, update the document title, move focus to a useful target such as the main heading, and ensure the main heading reflects the new route.

document.title = "Reports | Product";
mainHeading.focus();

Retest

  • Navigate to the route and confirm the page title changes.
  • Confirm focus lands at a useful new-page target.
  • Confirm the main heading matches the destination.

Report it

Example: Activating Reports changes the SPA content visually, but focus and page context do not update for screen reader users.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.