这是一份关于如何测试 Gutenberg 无障碍性的指南。这是一份动态文档,可以随着新方法和技术的出现而不断改进。

开始使用

请确保您已按照 入门指南 中的说明设置好本地环境。

键盘测试

除了鼠标操作外,请确保界面完全支持仅使用键盘的用户。尝试仅使用键盘与您的更改进行交互:

  • 确保交互式元素可以通过 Tab、Shift+Tab 或方向键获得焦点。
  • 按钮应能通过按下 Enter 和 Space 键来激活。
  • 单选按钮和复选框应通过按下 Space 键选中,而不是 Enter 键。

如果元素可以使用方向键聚焦,但不能使用 Tab 或 Shift+Tab 聚焦,请考虑使用 WAI-ARIA 复合子类角色(如 toolbar、menu 和 listbox)将它们分组。

如果交互对您来说复杂或令人困惑,请考虑到这也会影响仅使用键盘的用户。

屏幕阅读器测试

根据 WebAIM:第 8 次屏幕阅读器用户调查结果,以下是最常见的屏幕阅读器和浏览器组合:

屏幕阅读器 & 浏览器受访者数量受访者百分比
JAWS 配合 Chrome25921.4%
NVDA 配合 Firefox23719.6%
NVDA 配合 Chrome21818.0%
JAWS 配合 Internet Explorer13911.5%
VoiceOver 配合 Safari1109.1%
JAWS 配合 Firefox715.9%
VoiceOver 配合 Chrome363.0%
NVDA 配合 Internet Explorer141.2%
其他组合12610.4%

在使用屏幕阅读器进行测试时,尽量使用列表中排名靠前的组合。例如,在使用 VoiceOver 进行测试时,最好使用 Safari。

NVDA 配合 Firefox

NVDA 是一款适用于 Windows 的免费屏幕阅读器,也是最受欢迎的屏幕阅读器。

安装后,您可以像打开其他程序一样打开应用程序来激活 NVDA。系统托盘中会出现一个图标,您可以通过它访问更多选项。建议启用“语音查看器”对话框,这样在您截图时更容易展示 NVDA 正在播报的内容。

启用了语音查看器的 NVDA 选项

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

NVDA 元素列表对话框

确保元素具有适当的标签,并优先通过地标区域进行导航,然后使用 Tab 和方向键在地标区域内移动以遍历其中的元素。

VoiceOver 配合 Safari

VoiceOver 是 macOS 上的原生屏幕阅读器。您可以在“系统偏好设置”>“辅助功能”>“VoiceOver”>“启用 VoiceOver”中启用它,或者在按住 Command 键的同时快速按三次 Touch ID 来启用。

macOS 辅助功能首选项面板

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

使用 VoiceOver Rotor 浏览表单控件和地标区域

优先选择某个区域或其他较大范围作为起点,而不是在 Rotor 中选择单个元素,这样您就可以更好地测试该区域内的导航。

一旦找到您要交互的区域,您可以使用 Control+Option 加上右箭头或左箭头键移动到页面上下一个或上一个元素。然后,遵循 VoiceOver 播报的指示进行操作。