nuxt/route-announcer

Why

After the first load, Nuxt changes pages without a browser navigation. A screen reader user who follows a link hears nothing: no new page title, no sign that the content changed, and keeps reading where they were.

Fix

Render <NuxtRouteAnnouncer /> once, in app.vue or in every layout. It announces the new page's title in a polite live region, so give each page a distinct title with useHead or useSeoMeta. Move focus to the main heading or <main> as well when the design allows.

Examples

<!-- good: app.vue -->
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout><NuxtPage /></NuxtLayout>
</template>

Sources

• Nuxt docs, NuxtRouteAnnouncer
• Nuxt docs, Accessibility (route announcements)

Read it in the terminal

npx github:dawidolko/frontend-skills explain nuxt/route-announcer