无障碍辅助工具和辅助技术

接下来，我们将注意力转向无障碍辅助工具，提供有关可用于帮助解决无障碍问题的工具类型的信息，并帮助你了解残障人士用于浏览网络的辅助技术。你将在后续文章中用到此处描述的工具。

预备知识	熟悉 HTML、CSS 以及对可访问性概念的基本理解。
学习成果	熟悉可用于帮助解决无障碍问题的工具类型，例如审计工具。设置屏幕阅读器并使用它们在桌面和移动设备上测试网站。熟悉其他类型的辅助技术，例如大文本或盲文键盘、替代指向设备和屏幕放大器。用户测试与自动化测试同样重要。

可访问性工具

让我们看看你可以用来测试网站无障碍性并修复所发现问题的工具和技术。

测试源顺序

你的内容应该在源顺序上具有逻辑意义——你总是可以在之后用 CSS 以不同的方式显示它，但你首先应该确保底层结构是正确的。这是因为辅助技术根据源的顺序读取网站内容，残障人士通常会修改或关闭部分 CSS 以使内容更易读（常见示例是增加字体大小和应用高对比度配色方案）。

要测试源顺序，你可以关闭网站的 CSS，看看没有 CSS 的情况下它是否易于理解。你可以通过手动从代码中删除 CSS 来做到这一点，但最简单的方法是使用浏览器功能，例如：

Firefox：从主菜单中选择查看 > 页面样式 > 无样式。
Safari：打开浏览器开发者工具，点击开发者工具面板左上角附近的设备设置按钮（看起来像电脑显示器），然后勾选出现的面板中的“禁用 CSS”复选框。
Chrome/Edge：安装Web Developer Toolbar扩展，然后重启浏览器。点击现在应该在你的扩展菜单中可用的“Web Developer”齿轮图标，然后选择CSS > 禁用所有样式。

颜色对比度检查器

为你的网站选择配色方案时，应确保文本（前景色）与背景色对比良好。你的设计可能看起来很酷，但如果人们无法阅读你的内容，那就毫无用处。使用像 WebAIM 的颜色对比度检查器这样的工具来检查你的方案对比度是否足够。

另一个建议是避免仅使用颜色来指示或突出显示重要信息，因为这可能会被有视觉障碍（如色盲）的人错过。例如，不要只用红色标记必填表单字段，而是用星号和红色标记它们。

注意：高对比度也能让使用带光泽屏幕的智能手机或平板电脑的人在明亮环境（如阳光下）更好地阅读页面。

审计工具

有多种审计工具可供你输入网页。它们将检查网页并返回页面上存在的无障碍问题列表。我们以Wave为例，这是一个在线无障碍测试工具，它接受一个网址并返回该页面的注释视图，其中突出显示了无障碍问题。

前往Wave 主页。
在页面顶部附近的文本输入框中输入我们的bad-form.html示例的 URL。然后按回车键或点击/轻触输入框最右侧的箭头。
网站应该突出显示存在的无障碍问题。点击显示的图标，查看 Wave 评估识别出的每个问题的更多信息。

其他值得查看的审计工具

注意：此类工具本身不足以解决所有无障碍问题。你需要结合使用这些工具、知识和经验、用户测试等，才能获得全面了解。

Deque 的 aXe 工具比我们上面提到的审计工具更进一步。像其他工具一样，它会检查页面并返回无障碍错误。它最直接有用的形式可能是浏览器扩展。

这些扩展在浏览器开发者工具中添加了一个无障碍选项卡。例如，我们安装了 Firefox 版本，然后用它审计了我们的bad-table.html示例。我们得到了以下结果：

A screenshot of accessibility issues identified by the Axe tool.

aXe 也可以使用 npm 进行安装，并可以与 Grunt 和 Gulp 等任务运行器、Selenium 和 Cucumber 等自动化框架、Jasmine 等单元测试框架以及其他更多工具集成（同样，详情请参阅 aXe 主页）。

屏幕阅读器

残障人士使用最常见的辅助技术 (AT) 类型之一——也是你将用来测试网页无障碍性最常见的类型之一——是屏幕阅读器。这些软件会朗读网页内容或安装在用户操作系统上的其他应用程序的内容。屏幕阅读器使人们无需看到任何视觉内容即可使用计算机。

Web 浏览器通过一种称为无障碍树的表示形式，向屏幕阅读器（和其他辅助技术）公开页面内容信息，以便与用户进行通信。这提供了语义信息，例如元素的名称和描述，它们的用途或角色（是按钮还是输入字段？），以及它们是否处于特定状态（例如，对话框是打开还是关闭？）。

对于一段文本来说，这些信息可能微不足道，因为它的发音与书写方式几乎相同，但对于下拉菜单或视频播放器等用户界面功能来说，它可能会变得复杂。这就是为什么正确使用语义 HTML 非常重要，你将在本模块的下一篇文章中详细了解。如果你使用错误的元素标记内容，可能会混淆屏幕阅读器用户。

确保你的开发机器上安装了一两个屏幕阅读器，并尝试通过屏幕阅读器使用你喜欢的网站，如下所述。了解视障人士如何使用网络是设计对每个人都更好的产品的关键。

有哪些屏幕阅读器可用？

有几种屏幕阅读器可用：

有些是付费商业产品，例如JAWS (Windows)。
有些是免费产品，例如NVDA (Windows)、ChromeVox (Chrome、Windows 和 macOS) 以及Orca (Linux)。
有些是内置在操作系统中的，例如VoiceOver (macOS 和 iOS)、ChromeVox (在 Chromebooks 上) 以及TalkBack (Android)。

通常，屏幕阅读器是运行在主操作系统上的独立应用程序，可以读取网页和其他应用程序中的内容（并非总是如此；例如 ChromeVox 是一个浏览器扩展）。屏幕阅读器在精确行为和控制方面往往存在一些差异，因此你需要查阅所选屏幕阅读器的文档以获取所有详细信息。尽管如此，它们基本都以相同的方式工作。

在接下来的几节中，我们将通过几个不同的屏幕阅读器进行一些测试，让你大致了解它们的工作原理以及如何使用它们进行测试。

注意：WebAIM 的为屏幕阅读器兼容性进行设计提供了一些关于屏幕阅读器使用和什么最适合屏幕阅读器的有用信息。另请参阅屏幕阅读器用户调查 #10 结果以了解一些有趣的屏幕阅读器使用统计数据。

旁白 (VoiceOver)

VoiceOver (VO) 随 Apple mac/iPhone/iPad 免费提供，因此如果你使用 Apple 产品，它对桌面/移动设备上的测试很有用。我们在 MacBook Pro 上的 macOS 上测试了它。

要将其打开，请按 Cmd + F5。如果您以前没有使用过 VO，将显示欢迎屏幕，您可以在其中选择是否启动 VO，并运行一个非常有用的教程来学习如何使用它。要将其关闭，请再次按 Cmd + F5。

注意：您至少应该完整地学习一遍教程——这是学习 VO 的一种非常有用的方法。

当 VO 打开时，显示屏看起来大致相同，但屏幕左下角会出现一个黑色框，其中包含 VO 当前选定的信息。当前选择也将用黑色边框突出显示——这种突出显示称为 VO 光标。

A sample screenshot demonstrating accessibility testing using VoiceOver on the MDN homepage. The bottom left of the image is a highlight of the information selected on the webpage.

要使用 VO，你需要大量使用“VO 修饰符”——这是一个或一组按键，你需要除了实际的 VO 键盘快捷键之外按下它们才能使其工作。像这样使用修饰符在屏幕阅读器中很常见，以使它们的命令不会与其他命令冲突。对于 VO，修饰符可以是 CapsLock，也可以是 Ctrl + Option。

VO 有许多键盘命令，我们不会在此处列出所有命令。网页测试所需的基本命令在下表中。在键盘快捷键中，“VO”表示“VoiceOver 修饰符”。

常见的 VoiceOver 键盘快捷键
键盘快捷键	描述
VO + 光标键	向上、向右、向下、向左移动 VO 光标。
VO + 空格键	选择/激活 VO 光标突出显示的项目。这包括转子中选择的项目（见下文）。
VO + `Shift` + 向下光标	进入一组项目，例如 HTML 表格或表单。进入组后，你可以使用上述命令正常移动和选择该组内的项目。
VO + `Shift` + 向上光标	移出组。
VO + `C`	（在表格内时）朗读当前列的标题。
VO + `R`	（在表格内时）朗读当前行的标题。
VO + `C` + `C`（连续两个 C）	（在表格内时）朗读整个当前列，包括标题。
VO + `R` + `R`（连续两个 R）	（在表格内时）朗读整个当前行，包括与每个单元格对应的标题。
VO + 向左光标，VO + 向右光标	（在某些水平选项内，例如日期选择器）在选项之间移动。
VO + 向上光标，VO + 向下光标	（在某些水平选项内，例如日期选择器）更改当前选项。
VO + `U`	打开转子，显示标题、链接、表单控件等列表，以便于导航。
VO + 向左光标，VO + 向右光标	（在转子内时）在转子中可用的不同列表之间移动。
VO + 向上光标，VO + 向下光标	（在转子内时）在当前转子列表中的不同项目之间移动。
`Esc`	（在转子内时）退出转子。
`Ctrl`	（当 VO 正在朗读时）暂停/恢复朗读。
VO + `Z`	重新开始上次朗读。
VO + `D`	进入 Mac 的 Dock，以便你可以选择在其中运行的应用程序。

这看起来命令很多，但习惯了就好，而且 VO 会经常提醒你在某些地方使用哪些命令。现在就试着使用 VO；然后你就可以在屏幕阅读器测试部分玩转我们的一些示例。

NVDA

NVDA 仅适用于 Windows，你需要安装它。

从nvaccess.org下载 NVDA，然后安装。你可以选择捐款或免费下载；下载前你还需要提供你的电子邮件地址。
安装后启动 NVDA，双击程序文件/快捷方式，或使用键盘快捷键 Ctrl + Alt + N。启动时会看到 NVDA 欢迎对话框。在这里你可以选择几个选项，然后按下确定按钮开始。

NVDA 将在您的计算机上激活。

要使用 NVDA，你需要大量使用“NVDA 修饰符”——这是除了实际的 NVDA 键盘快捷键之外，你需要按下才能使其工作的按键。NVDA 修饰符可以是 Insert（默认），也可以是 CapsLock（可以在按下确定之前，在 NVDA 欢迎对话框中勾选第一个复选框来选择）。

注意：NVDA 在突出显示其位置和正在做什么方面比 VoiceOver 更微妙。当您滚动浏览标题、列表等时，您选择的项目通常会用微妙的轮廓突出显示，但并非所有情况都如此。如果您完全迷失，可以按 Ctrl + F5 刷新当前页面并从头开始。

NVDA 有许多键盘命令，我们不会在此处列出所有命令。网页测试所需的基本命令在下表中。在键盘快捷键中，“NVDA”表示“NVDA 修饰符”。

最常见的 NVDA 键盘快捷键
键盘快捷键	描述
NVDA + `Q`	启动后再次关闭 NVDA。
NVDA + 向上光标	朗读当前行。
NVDA + 向下光标	从当前位置开始朗读。
向上光标和向下光标，或 `Shift` + `Tab` 和 `Tab`	移动到页面上上一个/下一个项目并朗读它。
向左光标和向右光标	移动到当前项目中的上一个/下一个字符并朗读它。
`Shift` + `H` 和 `H`	移动到上一个/下一个标题并朗读它。
`Shift` + `K` 和 `K`	移动到上一个/下一个链接并朗读它。
`Shift` + `D` 和 `D`	移动到上一个/下一个文档地标（例如，`<nav>`）并朗读它。
`Shift` + `1`–`6` 和 `1`–`6`	移动到上一个/下一个标题（级别 1-6）并朗读它。
`Shift` + `F` 和 `F`	移动到上一个/下一个表单输入并聚焦它。
`Shift` + `T` 和 `T`	移动到上一个/下一个数据表并聚焦它。
`Shift` + `B` 和 `B`	移动到上一个/下一个按钮并朗读其标签。
`Shift` + `L` 和 `L`	移动到上一个/下一个列表并朗读其第一个列表项。
`Shift` + `I` 和 `I`	移动到上一个/下一个列表项并朗读它。
`Enter`/`Return`	（当链接/按钮或其他可激活项目被选中时）激活项目。
NVDA + `空格键`	（当表单被选中时）进入表单以选择单个项目，如果已经在表单中则离开表单。
`Shift` + `Tab` 和 `Tab`	（在表单内时）在表单输入之间移动。
向上光标和向下光标	（在表单内时）更改表单输入值（对于选择框等控件）。
`空格键`	（在表单内时）选择所选值。
`Ctrl` + `Alt` + 光标键	（当表格被选中时）在表格单元格之间移动。

屏幕阅读器测试

现在你已经习惯了使用屏幕阅读器，我们希望你用它进行一些快速的无障碍测试，以了解屏幕阅读器如何处理网页中的好坏功能：

查看good-semantics.html，并注意屏幕阅读器如何找到标题并可用于导航。现在查看bad-semantics.html，并注意屏幕阅读器如何获取不到任何此类信息。想象一下，当尝试浏览一个非常长的文本页面时，这会多么令人恼火。
查看good-links.html，并注意当它们脱离上下文查看时（例如在 VoiceOver 转子中），它们如何有意义。而bad-links.html则不是这样——它们都只是“点击这里”。
查看good-form.html，并注意表单输入如何通过其标签进行描述，因为我们添加了适当的<label>元素。在bad-form.html中，它们获得了一个无用的标签，大致意思是“空白”。
查看我们的punk-bands-complete.html示例，看看屏幕阅读器如何能够关联内容的列和行并将它们一起读出，因为我们正确定义了表格标题。在bad-table.html中，所有单元格都无法关联。请注意，当页面上只有一个表格时，NVDA 的行为似乎有些奇怪；你可以尝试WebAIM 的表格测试页面。
请查看WAI-ARIA 实时区域示例，并注意屏幕阅读器将如何随着不断更新的部分而持续朗读。

轨迹球：有点像倒置的鼠标，轨迹球由一个安装在桌面上保持静止的球组成，你可以滚动它来移动指针。它们被认为比鼠标更精确，更容易操作，特别是对于手部活动受限的人。
操纵杆：一个可以移动以移动指针的控制杆。操纵杆不如轨迹球精确，但可供各种身体障碍（甚至严重残疾）的人使用。
触摸板：大多数现代笔记本电脑都有触摸板（有时称为轨迹板）——一个扁平的触觉传感器，让你可以用手指移动指针，以及像移动设备手势一样执行多指手势。你可以为没有内置触摸板的设备购买外接触摸板。有些人发现它们比鼠标更精确。

屏幕放大镜

屏幕放大器为视力部分受损的用户提供其设备显示屏的放大视图，使他们更容易理解和与设备内容交互，并提供其他功能，例如颜色调整以帮助色盲，以及调整鼠标指针和文本光标的大小以使其更易于查看。

软件和硬件屏幕放大器均可使用：

大多数现代操作系统都有内置的应用程序来放大屏幕的全部或部分，例如 Mac 上的 Zoom 或 Windows 上的放大镜。它们还倾向于提供普遍增加文本大小、鼠标光标大小等选项。第三方选项也可用。
硬件屏幕放大器通常由一个单独的屏幕组成，该屏幕位于设备屏幕旁边或前面，并投射其放大版本，或其部分的缩放版本。

语音识别软件

语音（或口语）识别软件允许你通过语音命令控制你的设备，以及/或者说出电子邮件或文档的文本，让计算机为你书写文本。这对于无法使用键盘或其他控制机制的人来说非常有用。

现代操作系统内置了启用此功能（例如 Mac 上的听写，或 Windows 上的语音访问），并且还有第三方应用程序可用，从桌面应用程序到浏览器扩展。

开关控制

开关控制为行动能力非常有限或认知障碍的用户提供了与设备交互的机制。

开关控制设置通常包括两个部分：

一个用于激活设备选项的物理开关或按钮。你还可以将开关功能分配给常规设备按钮（如音量控制）或键盘上的按键。
一种设备模式或第三方软件附加组件，使设备与开关或按钮控制兼容。例如，Android 上的 Switch Access 是一种模式，在这种模式下，各种情况下的不同选项（例如，主屏幕上的应用程序）会循环显示，然后当达到你想要的选择时，可以使用按钮或开关进行选择。