这是一份关于如何测试 Gutenberg 无障碍性的指南。这是一份动态文档,可以随着新方法和技术的出现而不断改进。
开始使用
请确保您已按照 入门指南 中的说明设置好本地环境。
键盘测试
除了鼠标操作外,请确保界面完全支持仅使用键盘的用户。尝试仅使用键盘与您的更改进行交互:
- 确保交互式元素可以通过 Tab、Shift+Tab 或方向键获得焦点。
- 按钮应能通过按下 Enter 和 Space 键来激活。
- 单选按钮和复选框应通过按下 Space 键选中,而不是 Enter 键。
如果元素可以使用方向键聚焦,但不能使用 Tab 或 Shift+Tab 聚焦,请考虑使用 WAI-ARIA 复合子类角色(如 toolbar、menu 和 listbox)将它们分组。
如果交互对您来说复杂或令人困惑,请考虑到这也会影响仅使用键盘的用户。
屏幕阅读器测试
根据 WebAIM:第 8 次屏幕阅读器用户调查结果,以下是最常见的屏幕阅读器和浏览器组合:
| 屏幕阅读器 & 浏览器 | 受访者数量 | 受访者百分比 |
|---|---|---|
| JAWS 配合 Chrome | 259 | 21.4% |
| NVDA 配合 Firefox | 237 | 19.6% |
| NVDA 配合 Chrome | 218 | 18.0% |
| JAWS 配合 Internet Explorer | 139 | 11.5% |
| VoiceOver 配合 Safari | 110 | 9.1% |
| JAWS 配合 Firefox | 71 | 5.9% |
| VoiceOver 配合 Chrome | 36 | 3.0% |
| NVDA 配合 Internet Explorer | 14 | 1.2% |
| 其他组合 | 126 | 10.4% |
在使用屏幕阅读器进行测试时,尽量使用列表中排名靠前的组合。例如,在使用 VoiceOver 进行测试时,最好使用 Safari。
NVDA 配合 Firefox
NVDA 是一款适用于 Windows 的免费屏幕阅读器,也是最受欢迎的屏幕阅读器。
安装后,您可以像打开其他程序一样打开应用程序来激活 NVDA。系统托盘中会出现一个图标,您可以通过它访问更多选项。建议启用“语音查看器”对话框,这样在您截图时更容易展示 NVDA 正在播报的内容。

在 Gutenberg 编辑器中,当 NVDA 处于激活状态时,您可以按 Insert+F7 打开元素列表,在其中可以找到按类型分组的元素,例如链接、标题、表单字段、按钮和地标区域。

确保元素具有适当的标签,并优先通过地标区域进行导航,然后使用 Tab 和方向键在地标区域内移动以遍历其中的元素。
VoiceOver 配合 Safari
VoiceOver 是 macOS 上的原生屏幕阅读器。您可以在“系统偏好设置”>“辅助功能”>“VoiceOver”>“启用 VoiceOver”中启用它,或者在按住 Command 键的同时快速按三次 Touch ID 来启用。

在 Gutenberg 编辑器中,当 VoiceOver 处于激活状态时,您可以按 Control+Option+U 打开 Rotor(旋转器),从而更轻松地找到页面上的不同区域和元素。这也是确保元素标记正确的好方法。如果此列表中的名称没有意义,则应加以改进。

优先选择某个区域或其他较大范围作为起点,而不是在 Rotor 中选择单个元素,这样您就可以更好地测试该区域内的导航。
一旦找到您要交互的区域,您可以使用 Control+Option 加上右箭头或左箭头键移动到页面上下一个或上一个元素。然后,遵循 VoiceOver 播报的指示进行操作。