Nuxt

nuxt/route-announcer

The app renders NuxtRouteAnnouncer (in app.vue or a layout) so client-side page changes are announced.

umiarkowanastatyczneWCAG 4.1.3 · AAfe-nuxt

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

Fakty

Identyfikator
nuxt/route-announcer
Waga
umiarkowana
Sprawdzanie
statyczne sprawdzane w kodzie źródłowym przez audit
Dotyczy plików
project
Tylko w projektach z
nuxt
WCAG 2.2
4.1.3, poziom AA
Uczy jej skill
fe-nuxt Nuxt apps
Od wersji
0.1.0

Plik reguły na GitHubie

Przeczytaj w terminalu

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