mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-05 03:47:12 +00:00
1.9 KiB
1.9 KiB
title | description | navigation | links | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<NuxtRouteAnnouncer> | The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies. |
|
|
::important This component is available in Nuxt v3.12+. ::
Usage
Add <NuxtRouteAnnouncer/>
in your app.vue
or layouts/
to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
<template>
<NuxtRouteAnnouncer />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Slots
You can pass custom HTML or components through the route announcer's default slot.
<template>
<NuxtRouteAnnouncer>
<template #default="{ message }">
<p>{{ message }} was loaded.</p>
</template>
</NuxtRouteAnnouncer>
</template>
Props
atomic
: Controls if screen readers only announce changes or the entire content. Set to true for full content readouts on updates, false for changes only. (defaultfalse
)politeness
: Sets the urgency for screen reader announcements:off
(disable the announcement),polite
(waits for silence), orassertive
(interrupts immediately). (defaultpolite
)
::callout This component is optional. :br To achieve full customization, you can implement your own one based on its source code. ::
::callout
You can hook into the underlying announcer instance using the useRouteAnnouncer
composable, which allows you to set a custom announcement message.
::