无障碍

Nuxt 提供了屏幕阅读器支持组件，确保应用对残障用户友好。

NuxtRouteAnnouncer

自动播报页面导航变化，供屏幕阅读器使用。当用户通过路由导航到新页面时，屏幕阅读器会自动朗读页面标题。

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

Props

Prop	类型	默认值	说明
politeness	'polite' | 'assertive'	'polite'	播报礼貌级别

politeness 等级说明

等级	行为	适用场景
polite	等待当前朗读完成后再播报	一般页面导航（默认）
assertive	立即中断当前朗读，强制播报	重要通知、紧急错误

TIP

建议在 app.vue 中始终添加 <NuxtRouteAnnouncer /> 这是无障碍的基本要求

---

NuxtAnnouncer（v4.4+）

手动播报页面内的动态内容变化，配合 useAnnouncer 使用。

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

useAnnouncer

const { polite, assertive } = useAnnouncer()

// 礼貌播报（等待当前朗读完成）
polite('新消息已加载')

// 强制播报（立即朗读）
assertive('错误：操作失败')

适用场景

场景	方法	说明
表单提交成功	polite('表单提交成功')	非紧急通知
表单验证错误	assertive('请填写必填字段')	需要立即关注
搜索结果更新	polite('找到 5 条结果')	信息更新
加载状态	polite('正在加载...')	状态提示
错误通知	assertive('网络连接失败')	紧急问题
购物车更新	polite('已添加到购物车')	操作反馈

完整示例：无障碍搜索

<template>
  <div>
    <input
      v-model="query"
      aria-label="搜索用户"
      @input="handleSearch"
    />
    <ul role="list" aria-label="搜索结果">
      <li v-for="user in results" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup>
const query = ref('')
const results = ref([])
const { polite } = useAnnouncer()

async function handleSearch() {
  results.value = await searchUsers(query.value)
  polite(`找到 ${results.value.length} 个用户`)
}
</script>

无障碍最佳实践

实践	说明
始终添加 NuxtRouteAnnouncer	页面导航时屏幕阅读器需要播报
动态内容使用 NuxtAnnouncer	AJAX 加载的内容变化需要手动播报
表单使用 aria-label	确保每个输入框有可访问的标签
图片使用 alt 属性	描述图片内容，装饰性图片用 alt=""
链接文本有意义	避免"点击这里"，使用描述性文字
键盘可操作	确保所有功能可用键盘完成

INFO

️ 无障碍不仅是技术要求 在许多国家和地区是法律义务。WCAG 2.1 AA 级别是常见的合规标准