用屏幕阅读器验证网页无障碍兼容性时如何测试与修复

需要验证网页在 VoiceOver、NVDA、JAWS 等屏幕阅读器下的兼容性、调试辅助技术问题或确保表单/动态内容可访问时使用。

适用场景

解决思路

1. 按优先级选择测试组合：最低覆盖 NVDA + Firefox（Windows）、VoiceOver + Safari（macOS）、VoiceOver + Safari（iOS）；完整覆盖再加 JAWS + Chrome（Windows）、TalkBack + Chrome（Android）、Narrator + Edge（Windows）。
2. 理解屏幕阅读器三种模式：Browse/Virtual 用于阅读内容（默认）、Focus/Forms 用于与控件交互（填表）、Application 用于自定义组件（ARIA 应用）。
3. VoiceOver（macOS）启用：System Preferences → Accessibility → VoiceOver，切换用 Cmd + F5，快速切换三击 Touch ID。
4. VoiceOver 导航命令：VO = Ctrl + Option；VO + 右箭头 下一个元素，VO + 左箭头 上一个元素，VO + Shift + 下箭头 进入分组，VO + Shift + 上箭头 退出分组。
5. VoiceOver 阅读命令：VO + A 从光标处全部朗读，Ctrl 停止朗读，VO + B 朗读当前段落。
6. VoiceOver 交互命令：VO + Space 激活元素，VO + Shift + M 打开菜单，Tab 下一个可聚焦元素，Shift + Tab 上一个可聚焦元素。
7. VoiceOver 转子（VO + U）：按 Headings、Links、Forms、Landmarks 导航，左右箭头切换类别，上下箭头在类别内导航，Enter 跳转到项。
8. VoiceOver Web 专用命令：VO + Cmd + H 下一个标题，VO + Cmd + J 下一个表单控件，VO + Cmd + L 下一个链接，VO + Cmd + T 下一个表格。
9. 按 VoiceOver 检查清单逐项验证：页面加载（标题是否朗读、主 landmark 是否找到、skip link 是否可用）；导航（标题能否通过转子发现、层级是否合理 H1→H2→H3、landmark 是否标注、skip link 是否可用）；链接与按钮（目的是否清晰、动作是否描述、新窗口/标签页是否提示）；表单（标签是否随输入朗读、必填是否提示、错误是否朗读、说明是否可用、焦点是否移到错误处）；动态内容（alert 是否立即朗读、加载状态是否传达、内容更新是否朗读、modal 是否正确捕获焦点）；表格（表头是否与单元格关联、表格导航是否可用、复杂表格是否有 caption）。
10. 修复常见问题：图标按钮无目的时加 aria-label 并将 svg 设为 aria-hidden="true"；动态内容不朗读时加 role="status" aria-live="polite"；表单错误不朗读时给 input 加 aria-invalid="true" aria-describedby="email-error"，错误 span 加 role="alert"。
11. NVDA（Windows）安装与启动：从 nvaccess.org 下载，Ctrl + Alt + N 启动，Insert + Q 停止。
12. NVDA 导航命令：Insert 为 NVDA 修饰键；下箭头 下一行，上箭头 上一行，Tab 下一个可聚焦，Shift + Tab 上一个可聚焦。
13. NVDA 阅读命令：NVDA + 下箭头 全部朗读，Ctrl 停止朗读，NVDA + 上箭头 当前行。
14. NVDA 标题命令：H 下一个标题，Shift + H 上一个标题，1-6 跳到对应级别标题。
15. NVDA 表单命令：F 下一个表单字段，B 下一个按钮，E 下一个编辑框，X 下一个复选框，C 下一个组合框。
16. NVDA 链接命令：K 下一个链接，U 下一个未访问链接，V 下一个已访问链接。
17. NVDA landmark 命令：D 下一个 landmark，Shift + D 上一个 landmark。
18. NVDA 表格命令：T 下一个表格，Ctrl + Alt + 方向键 在单元格间导航。
19. NVDA 元素列表（NVDA + F7）：显示所有链接、标题、表单字段、landmark。
20. NVDA 浏览与焦点模式：自动切换，浏览模式下方向键导航内容，焦点模式下方向键控制交互元素，手动切换用 NVDA + Space；注意进入表单字段时是否提示 "Focus mode"，application role 会强制进入表单模式。
21. 按 NVDA 测试脚本执行：初始加载（导航到页面、等待加载完成、Insert + Down 全部朗读、记录标题与主内容是否识别）；landmark 导航（反复按 D，检查主要区域是否可达、标注是否正确）；标题导航（Insert + F7 → Headings，检查层级是否合理，按 H 导航，检查各区块是否可发现）；表单测试（按 F 找第一个字段，检查标签是否朗读，填入无效数据并提交，检查错误是否朗读、焦点是否移到错误处）；交互元素（Tab 遍历所有交互元素，检查角色与状态是否朗读，用 Enter/Space 激活按钮，检查结果是否朗读）；动态内容（触发内容更新，检查变化是否朗读，打开 modal 检查焦点是否捕获，关闭 modal 检查焦点是否返回）。
22. JAWS（Windows）启动：桌面快捷方式或 Ctrl + Alt + J，浏览器中虚拟光标自动启用。
23. JAWS 导航命令：方向键 导航内容，Tab 下一个可聚焦，Insert + Down 全部朗读，Ctrl 停止朗读。
24. JAWS 快速键：H 下一个标题，T 下一个表格，F 下一个表单字段，B 下一个按钮，G 下一个图形，L 下一个列表，; 下一个 landmark。
25. JAWS 表单模式：Enter 进入表单模式，Numpad + 退出表单模式，F5 列出表单字段。
26. JAWS 列表：Insert + F7 链接列表，Insert + F6 标题列表，Insert + F5 表单字段列表。
27. JAWS 表格导航：Ctrl + Alt + 方向键。
28. TalkBack（Android）启用：Settings → Accessibility → TalkBack，同时按住两个音量键 3 秒切换。
29. TalkBack 手势：手指在屏幕上拖动探索，右滑下一个，左滑上一个，双击激活，双指滑动滚动；朗读控制（先上滑再右滑）可切换标题、链接、控件、字符、单词、行、段落。
30. 实现可访问 modal：使用 role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-desc"；打开时保存 lastFocus = document.activeElement，将焦点移到 modal 的 h2，并监听 keydown 捕获焦点；关闭时将焦点返回 lastFocus；trapFocus 中处理 Tab 循环（Shift+Tab 在第一个元素时跳到最后一个，Tab 在最后一个元素时跳到第一个）以及 Escape 关闭。
31. 实现 live region：状态消息用 role="status" aria-live="polite" aria-atomic="true"；alert 用 role="alert" aria-live="assertive"；进度用 role="progressbar" aria-valuenow/aria-valuemin/aria-valuemax/aria-label；日志用 role="log" aria-live="polite" aria-relevant="additions"。
32. 实现可访问 tab 界面：tablist 加 role="tablist" aria-label；每个 tab 用 role="tab"、aria-selected、aria-controls，未选中 tab 设 tabindex="-1"；panel 用 role="tabpanel" aria-labelledby，隐藏的加 hidden；键盘处理 ArrowRight/ArrowLeft 循环切换、Home 到第一个、End 到最后一个，切换后 focus 并 activateTab，preventDefault。
33. 调试时用 logAccessibleName 打印元素的可访问信息：role（aria role 或 tagName）、name（aria-label 或 aria-labelledby 或 textContent）、state（aria-expanded/selected/checked/disabled）、visible（display 与 visibility 是否隐藏）。
34. 最佳实践 Do：用真实屏幕阅读器测试而非模拟器；优先使用语义 HTML，ARIA 只是补充；在浏览模式和焦点模式下都测试；验证焦点管理（尤其 SPA）；先只测键盘。
35. 最佳实践 Don't：不要假设一个屏幕阅读器就够，要测多个；不要忽略移动端；不要只测正常路径，要测错误状态；不要跳过动态内容（最常见问题）；不要依赖视觉测试。

适用边界 · 注意事项

• 没有安装或无法使用真实屏幕阅读器（VoiceOver/NVDA/JAWS/TalkBack/Narrator）时，仅靠模拟器无法完成有效验证。
• 只做纯视觉或纯键盘测试、不验证辅助技术朗读效果时，本技能不适用。
• 项目不涉及 Web 前端或无障碍需求时无需使用。