title: "无障碍测试" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Contributors - Repos - Data

无障碍测试

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

开始之前

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

键盘测试

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

• 确保交互元素可以通过 Tab、Shift+Tab 或方向键获得焦点。
• 按钮应能通过按 Enter 和 空格 键激活。
• 单选按钮和复选框应能通过按 空格 键（而非 Enter 键）选中。

如果元素可以使用方向键获得焦点，但不能使用 Tab 或 Shift+Tab，请考虑使用 WAI-ARIA 复合子类角色之一（例如 toolbar、menu 和 listbox）对它们进行分组。

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

Screen reader testing

According to the WebAIM: Screen Reader User Survey #8 Results, these are the most common screen reader and browser combinations:

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 is a free screen reader for Windows and the most popular one.

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.

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

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

VoiceOver with Safari

VoiceOver 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.

While in the Gutenberg editor, with VoiceOver activated, you can press Control+Option+U 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.

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 Control+Option 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.