<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 }} 已加载。</p>
</template>
</NuxtRouteAnnouncer>
</template>
属性
atomic
:控制屏幕阅读器是只播报变化内容还是全部内容。设置为 true 表示更新时朗读完整内容,false 表示仅朗读变化内容。(默认false
)politeness
:设置屏幕阅读器播报的紧急程度:off
(禁用播报)、polite
(等待空闲时播报)、assertive
(立即中断播报)。 (默认polite
)
该组件为可选。
若需完全自定义,可以基于其源代码自行实现。
若需完全自定义,可以基于其源代码自行实现。
你可以通过
useRouteAnnouncer
组合式函数访问底层播报实例,从而设置自定义播报信息。