a11y/focus-route-change

Why

In a single-page app the browser does not reload, so focus stays on the link that was clicked (or falls to <body>) and a screen reader says nothing. The person does not know the page changed.

Fix

Use the framework's announcer where it exists (Next.js and SvelteKit announce route changes; Nuxt has <NuxtRouteAnnouncer>). Then move focus: after navigation, focus the new page's <h1 tabindex="-1"> or <main tabindex="-1">. Keep each route's <title> unique, because announcers read it.

Examples

// good (Angular): focus the main heading after navigation
router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
  document.querySelector('main h1')?.focus()
})

Sources

• WCAG 2.2, Understanding SC 2.4.3 Focus Order
• Next.js, accessibility (route announcements)
• Nuxt, NuxtRouteAnnouncer component
• SvelteKit, accessibility (route announcements, focus management)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/focus-route-change