65 lines
4.4 KiB
Markdown
65 lines
4.4 KiB
Markdown
# 无障碍功能测试
|
||
|
||
本文是关于如何在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的语音提示进行操作指引。 |