本模块重点介绍如何使用辅助技术 (AT) 进行无障碍功能测试。残障人士可以使用辅助技术来帮助提升、维持或改善执行任务的能力。
在数字空间中，辅助技术可以：
- 低技术或无技术：头控笔、口控笔、手持放大镜、带大按钮的设备
- 高科技：声控设备、眼动追踪设备、自适应键盘和鼠标
- 硬件：开关按钮、人体工学键盘、自动刷新盲文设备
- 软件：文字转语音程序、实时字幕、屏幕阅读器
我们建议您在整个测试工作流程中使用多种类型的 AT。
屏幕阅读器测试基础知识
在本模块中，我们将重点介绍最受欢迎的数字辅助技术之一：屏幕阅读器。 屏幕阅读器是一种可读取网站或应用底层代码的软件。然后，它会将这些信息转换为语音或盲文输出，供用户使用。
屏幕阅读器对于盲人和盲聋人士至关重要，但也能帮助低视力、阅读障碍和认知障碍人士。
浏览器兼容性
有多种屏幕阅读器选项可供选择。最常用的屏幕阅读器包括适用于桌面设备的 JAWS、NVDA 和 VoiceOver，以及适用于移动设备的 VoiceOver 和 Talkback。
根据您的操作系统 (OS)、首选浏览器和所用设备，某款屏幕阅读器可能成为最佳选择。大多数屏幕阅读器都是针对特定硬件和网络浏览器而构建的。如果您将屏幕阅读器与未经过校准的浏览器搭配使用，可能会遇到更多“bug”或意外行为。屏幕阅读器在以下组合中使用时效果最佳。
| 屏幕阅读器 | 操作系统 | 浏览器兼容性 |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome、Firefox、Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome 和 Firefox |
| 讲述者 | Windows | Edge |
| 旁白 | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome 和 Firefox |
| VoiceOver（移动设备专用） | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
屏幕阅读器命令
为桌面设备或移动设备正确设置屏幕阅读器软件后，您应查看屏幕阅读器文档（上表中提供了相关链接），并运行一些基本的屏幕阅读器命令，以便熟悉这项技术。如果您之前使用过屏幕阅读器，不妨尝试一下新的屏幕阅读器！
在无障碍功能测试中使用屏幕阅读器时，您的目标是检测代码中会干扰网站或应用使用的相关问题，而不是模拟屏幕阅读器用户的体验。因此，只需掌握一些基础知识、几个屏幕阅读器命令，并进行一些（或大量）练习，您就可以完成很多操作。
如果您需要进一步了解使用屏幕阅读器和其他辅助技术的用户的体验，可以与许多组织和个人联系，以获得宝贵的见解。请注意，使用 AT 根据一组规则测试代码与询问用户体验通常会产生不同的结果。这两者都是打造完全包容性产品的重要方面。
桌面屏幕阅读器的按键命令
| 元素 | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| 常规命令键 | 插入 | Control+Option |
| 停止播放 | 控制 | 控制 |
| 阅读下一篇/上一篇 | ↓ 或 ↑ | Control+Option+→ 或 ← |
| 开始朗读 | 插入↓ | Control+Option+A |
| 元素列表/转子 | NVDA + F7 | Control+Option+U |
| 地标 | D | Control+Option+U |
| 标题 | H | Control+Option+Command+H |
| 链接 | K | Control+Option+Command+L |
| 表单控件 | F | Control+Option+Command+J |
| 表格 | T | Control+OptionCommand+T |
| 表格内 | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
移动屏幕阅读器的按键命令
| 元素 | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| 探索 | 用一根手指在屏幕上拖动 | 用一根手指在屏幕上拖动 |
| 选择或激活 | 点按两次 | 点按两次 |
| 向上或向下移动 | 用两根手指向上或向下滑动 | 用三根手指向向上或向下滑动 |
| 更改页面 | 用两根手指向左或向右滑动 | 用三根手指向左或向右滑动 |
| 下一个/上一个 | 用 1 根手指向左或向右滑动 | 用 1 根手指向左或向右滑动 |
屏幕阅读器测试演示
为了测试我们的演示，我们使用了在运行 macOS 的笔记本电脑上运行的 Safari 并捕获声音。 您可以使用任何屏幕阅读器完成这些步骤，但遇到某些错误的方式可能与本模块中的描述不同。
第 1 步
访问已应用所有自动化和手动无障碍功能更新的更新版 CodePen。
在调试模式下查看，以便继续进行后续测试。这一点很重要，因为它可以移除围绕演示网页的 <iframe>，这可能会干扰某些测试工具。详细了解 CodePen 的调试模式。
第 2 步
激活所选的屏幕阅读器，然后前往演示页面。您可以考虑先从上到下浏览整个页面，然后再专注于解决特定问题。
我们已针对每个问题录制了屏幕阅读器在应用修复前后的演示。建议您使用自己的屏幕阅读器运行演示。
问题 1：内容结构
标题和位置标记是用户使用屏幕阅读器进行导航的主要方式之一。如果缺少这些元素，屏幕阅读器用户必须阅读整个网页才能了解上下文。这可能需要很长时间，并且会令人感到沮丧。
如果您尝试通过演示中的任一元素进行导航，很快就会发现它们不存在。
- 地标示例：
<div class="main">...</div> - 标题示例：
<p class="h1">Join the Club</p>
如果您已正确更新所有内容，则不会有任何视觉变化，但屏幕阅读器体验将得到显著改善。
让我们来解决这个问题。
有些无障碍元素无法仅通过查看网站来发现。您可能还记得，在内容结构模块中，我们曾强调标题级别和语义 HTML 的重要性。某段内容可能看起来像标题，但实际上该内容包含在样式化的 <div> 中。
如需修正标题和地标方面的问题，您必须先确定应标记为标题和地标的每个元素，然后更新相关的 HTML。请务必同时更新相关 CSS。
- 地标示例：
<main>...</main> - 标题示例：
<h1>Join the Club</h1>
如果您已正确更新所有内容，则不会有任何视觉变化，但屏幕阅读器体验将得到显著改善。
问题 2：链接上下文
为屏幕阅读器用户提供有关链接用途的信息，以及链接是否会将他们重定向到网站或应用之外的新位置，这一点非常重要。
在演示版中，我们更新了有效图片替代文本，修复了大部分链接，但还有一些关于各种罕见疾病的链接可以添加更多背景信息，尤其是当这些链接重定向到新位置时。
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
为了解决屏幕阅读器用户遇到的此问题，我们更新了代码以添加更多信息，而不会影响视觉元素。或者，为了帮助更多人（例如有阅读障碍和认知障碍的人），我们可能会选择添加额外的可视文本。
我们可以考虑许多不同的模式来添加其他链接信息。在仅支持一种语言的环境中，ARIA 标签是这种情况下的简单选择。您可能会注意到，ARIA 标签会替换原始链接文本，因此请务必在更新中添加该信息。
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
问题 3：装饰性图片
在我们的自动化测试模块中，Lighthouse 无法识别作为演示网页上主要启动画面的内嵌 SVG。不过，屏幕阅读器会找到该图片并将其朗读为“图片”，而不会提供其他信息。
即使未明确向 SVG 添加 role="img" 属性，也是如此。
<div class="section-right">
<svg>...</svg>
</div>
如需解决此问题，我们首先需要确定图片是信息性图片还是装饰性图片。根据该决定，我们需要添加适当的图片替代文本（信息性图片），或者向屏幕阅读器用户隐藏图片（装饰性图片）。
我们权衡了对图片进行分类的各种方法的优缺点，最终决定将其归类为装饰性图片，这意味着我们需要添加或修改代码来隐藏该图片。一种快速方法是直接向 SVG 图片添加 role="presentation"。这会向屏幕阅读器发送信号，让其跳过此图片，并且不将其列在图片组中。
<div class="section-right">
<svg role="presentation">...</svg>
</div>
问题 4：项目符号装饰
您可能已经注意到，屏幕阅读器会读取“罕见疾病”部分下的 CSS 项目符号图片。虽然此图片与我们在图片模块中讨论的图片不同，但仍必须修改，因为它会扰乱内容流程，并可能会分散或混淆屏幕阅读器用户的注意力。
<p class="bullet">...</p>
与前面讨论的装饰性图片示例类似，您可以在 HTML 中添加带有 bullet 类的 role="presentation"，以向屏幕阅读器隐藏该图片。同样，role="none" 也会奏效。但请务必不要使用 aria-hidden: true，否则您将向屏幕阅读器用户隐藏所有段落信息。
<p class="bullet" role="none">...</p>
问题 5：表单字段
在表单模块中，我们了解到所有表单字段都必须具有视觉标签和程序化标签。此标签必须始终保持可见。
在我们的演示中，简报订阅电子邮件字段缺少视觉标签和程序化标签。虽然有文本占位符元素，但它不会替换标签，因为它的视觉效果不持久，并且与所有屏幕阅读器不完全兼容。
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
如需解决此问题，请将文本占位符替换为外观相似的标签元素。该标签元素以程序化方式连接到表单字段，并使用 JavaScript 添加了移动效果，以便即使在向字段中添加内容时，标签也保持可见。
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
小结
恭喜！您已完成本演示的所有测试。您可以在此演示的更新版 Codepen 中查看所有这些更改。
现在，您可以运用所学知识来检查自己网站和应用的无障碍功能。
所有这些无障碍功能测试的目标都是解决用户可能会遇到的尽可能多的问题。不过，这并不意味着您完成上述步骤后，您的网站或应用就完全无障碍了。在整个过程中，您应在设计网站或应用时考虑无障碍功能，并将这些测试与其他发布前测试相结合，这样才能取得最佳效果。