<NuxtRouteAnnouncer>
<NuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素,以便向辅助技术播报路由更改。
此组件在 Nuxt v3.12+ 版本中可用。
用法
在你的 app.vue
或 layouts/
中添加 <NuxtRouteAnnouncer/>
,通过告知辅助技术页面标题更改来增强可访问性。 这确保了导航更改会播报给依赖屏幕阅读器的用户。
app.vue
<template>
<NuxtRouteAnnouncer />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
插槽
你可以通过路由播报器的默认插槽传递自定义 HTML 或组件。
<template>
<NuxtRouteAnnouncer>
<template #default="{ message }">
<p>{{ message }} was loaded.</p>
</template>
</NuxtRouteAnnouncer>
</template>
属性
atomic
: 控制屏幕阅读器仅播报更改还是播报全部内容。设置为 true 以在更新时完整朗读内容,设置为 false 则仅朗读更改。(默认false
)politeness
: 设置屏幕阅读器播报的紧急程度:off
(禁用播报)、polite
(等待静默)或assertive
(立即中断)。(默认polite
)
此组件是可选的。
要实现完全自定义,你可以基于 其源代码 实现你自己的组件。
要实现完全自定义,你可以基于 其源代码 实现你自己的组件。
你可以使用
useRouteAnnouncer
composable Hook 到底层播报器实例,这允许你设置自定义播报消息。