# 无障碍测试

这是一份关于如何在 Gutenberg 中测试无障碍功能的指南。这是一份动态文档，可以随着新方法和技术的出现而不断完善。

## 开始之前

请确保您已按照[入门指南](/docs/contributors/code/getting-started-with-code-contribution)中的说明设置好本地环境。

## 键盘测试

除了鼠标，请确保界面对于仅使用键盘的用户完全可访问。尝试仅使用键盘与您的更改进行交互：

-   确保交互元素可以通过 <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)）对它们进行分组。

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

## Screen reader testing

According to the [WebAIM: Screen Reader User Survey #8 Results](https://webaim.org/projects/screenreadersurvey8/#usage), these are the most common screen reader and browser combinations:

| Screen Reader & Browser     | # of Respondents | % of Respondents |
| --------------------------- | ---------------- | ---------------- |
| JAWS with Chrome            | 259              | 21.4%            |
| NVDA with Firefox           | 237              | 19.6%            |
| NVDA with Chrome            | 218              | 18.0%            |
| JAWS with Internet Explorer | 139              | 11.5%            |
| VoiceOver with Safari       | 110              | 9.1%             |
| JAWS with Firefox           | 71               | 5.9%             |
| VoiceOver with Chrome       | 36               | 3.0%             |
| NVDA with Internet Explorer | 14               | 1.2%             |
| Other combinations          | 126              | 10.4%            |

When testing with screen readers, try to use some of the combinations at the top of this list. For example, when testing with VoiceOver, it's preferable to use Safari.

### NVDA with Firefox

[NVDA](https://www.nvaccess.org/about-nvda/) is a free screen reader for Windows and [the most popular one](https://webaim.org/projects/screenreadersurvey8/#primary).

After installing it, you can activate NVDA by opening the app as you would do with other programs. An icon will appear on the System Tray where you have access to more options. It's recommended to enable the "Speech viewer" dialog so it's easier to demonstrate what's being announced by NVDA when you take screenshots.

<img src="https://user-images.githubusercontent.com/3068563/108868727-428db880-75d5-11eb-84a9-2c0b749a22ad.png" alt="NVDA options with Speech viewer enabled" width="640">

While in the Gutenberg editor, with NVDA activated, you can press <kbd>Insert+F7</kbd> to open the Elements List where you can find elements grouped by their types, such as links, headings, form fields, buttons and landmarks.

<img src="https://user-images.githubusercontent.com/3068563/109054067-33356a80-76bc-11eb-83d4-e0c536c30d22.png" alt="NVDA Elements List dialog" width="640">

Make sure the elements have proper labels and prefer to navigate through landmarks and then use <kbd>Tab</kbd> and arrow keys to move through the elements within the landmarks.

### VoiceOver with Safari

[VoiceOver](https://support.apple.com/guide/voiceover-guide/welcome/web) is the native screen reader on macOS. You can enable it on System Preferences > Accessibility > VoiceOver > Enable VoiceOver or by quickly pressing Touch ID three times while holding the Command key.

<img src="https://user-images.githubusercontent.com/3068563/107645175-2560fd80-6c57-11eb-9e07-365c798869d8.png" alt="macOS accessibility preferences panel" width="720">

While in the Gutenberg editor, with VoiceOver activated, you can press <kbd>Control+Option+U</kbd> to open the Rotor and find more easily the different regions and elements on the page. This is also a good way to make sure elements are labelled correctly. If a name on this list doesn't make sense, it should be improved.

<img src="https://user-images.githubusercontent.com/3068563/107646280-8e954080-6c58-11eb-8481-72e051d73973.gif" alt="Navigating through form controls and landmarks using the VoiceOver Rotor" width="640">

Prefer to select a region or another larger area to begin with instead of individual elements on the Rotor so you can better test the navigation within that region.

Once you find the region you want to interact with, you can use <kbd>Control+Option</kbd> plus right or left arrow keys to move to the next or previous elements on the page. Then, follow the instructions that VoiceOver will announce.