# 无障碍功能测试

本文是关于如何在Gutenberg平台上进行无障碍功能测试的指南。这是一份动态文档，将随着新方法和新技术的出现不断完善。

## 快速开始

请确保已按照[快速开始](/docs/contributors/code/getting-started-with-code-contribution.md)指南完成本地环境配置。

## 键盘操作测试

除鼠标操作外，请确保界面完全支持纯键盘用户操作。尝试仅使用键盘进行交互测试：

-   确保交互元素可通过<kbd>Tab</kbd>、<kbd>Shift+Tab</kbd>或方向键获取焦点
-   按钮应支持<kbd>Enter</kbd>和<kbd>空格</kbd>键激活
-   单选按钮和复选框应支持<kbd>空格</kbd>键选中（不适用<kbd>Enter</kbd>键）

若元素可通过方向键聚焦但无法使用<kbd>Tab</kbd>或<kbd>Shift+Tab</kbd>操作，建议采用[WAI-ARIA复合子类角色](https://www.w3.org/TR/wai-aria-1.1/#composite)进行分组，例如[`toolbar`](https://www.w3.org/TR/wai-aria-1.1/#toolbar)、[`menu`](https://www.w3.org/TR/wai-aria-1.1/#menu)和[`listbox`](https://www.w3.org/TR/wai-aria-1.1/#listbox)。

若交互逻辑对您而言复杂难懂，请意识到这同样会影响纯键盘用户的使用体验。

## 屏幕阅读器测试

根据[WebAIM第八次屏幕阅读器用户调查](https://webaim.org/projects/screenreadersurvey8/#usage)，以下是最常见的屏幕阅读器与浏览器组合：

| 屏幕阅读器与浏览器组合        | 受访人数 | 占比   |
| ----------------------------- | -------- | ------ |
| 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](https://www.nvaccess.org/about-nvda/)是Windows平台免费的屏幕阅读器，也是[目前最流行的解决方案](https://webaim.org/projects/screenreadersurvey8/#primary)。

安装完成后，您可像启动常规程序一样激活NVDA。系统托盘将出现功能图标，提供更多选项设置。建议启用"语音查看器"对话框，便于在截屏时直观展示NVDA的语音提示内容。

<img src="https://user-images.githubusercontent.com/3068563/108868727-428db880-75d5-11eb-84a9-2c0b749a22ad.png" alt="启用语音查看器的NVDA选项界面" width="640">

在Gutenberg编辑器中激活NVDA后，可按<kbd>Insert+F7</kbd>打开元素列表。该功能将页面元素按类型分类展示，包括链接、标题、表单字段、按钮和地标区域。

<img src="https://user-images.githubusercontent.com/3068563/109054067-33356a80-76bc-11eb-83d4-e0c536c30d22.png" alt="NVDA元素列表对话框" width="640">

请确保元素具有规范标签，建议优先通过地标导航，再结合<kbd>Tab</kbd>键与方向键在地标区域内移动焦点。

### VoiceOver + Safari 组合

[VoiceOver](https://support.apple.com/guide/voiceover-guide/welcome/web)是macOS原生屏幕阅读器。可通过系统偏好设置>辅助功能>VoiceOver>启用VoiceOver激活，或在按住Command键的同时快速连按三次Touch ID启用。

<img src="https://user-images.githubusercontent.com/3068563/107645175-2560fd80-6c57-11eb-9e07-365c798869d8.png" alt="macOS辅助功能设置面板" width="720">

在Gutenberg编辑器中激活VoiceOver后，可按<kbd>Control+Option+U</kbd>启动转子功能，快速定位页面中的不同区域与元素。这也是检验元素标签是否规范的有效方式，若转子列表中的名称表述不清，则需要优化改进。

<img src="https://user-images.githubusercontent.com/3068563/107646280-8e954080-6c58-11eb-8481-72e051d73973.gif" alt="通过VoiceOver转子导航表单控件与地标区域" width="640">

建议在转子中优先选择区域或较大范围开始测试，而非直接选择独立元素，以便更完整地验证区域内的导航逻辑。

定位目标区域后，可使用<kbd>Control+Option</kbd>配合左右方向键在页面元素间移动。请遵循VoiceOver的语音提示进行操作指引。