辅助技术测试

本单元重点介绍如何使用辅助技术 (AT) 进行无障碍测试。残障人士可以使用辅助技术来帮助提升、维持或改善执行任务的能力。

在数字领域，AT 可以：

• 没有或低科技：头部棒和嘴巴、手持放大镜、带有大按钮的设备
• 高科技：语音启用设备、眼球跟踪设备、自适应键盘和鼠标
• 硬件：开关按钮、符合人体工学要求的键盘、自动刷新的盲文设备
• 软件：文字转语音程序、实时字幕、屏幕阅读器

我们建议您在整个测试工作流程中使用多种类型的测试 API。

屏幕阅读器测试基础知识

在本单元中，我们将重点介绍最受欢迎的数字 AT 之一，即屏幕阅读器。屏幕阅读器是一种软件，可读取网站或应用的底层代码，然后将这些信息转换为语音或盲文输出，供用户使用。

屏幕阅读器对盲人和盲聋人士至关重要，但对弱视人士、阅读障碍人士和认知障碍人士也非常有用。

浏览器兼容性

有多种屏幕阅读器选项可供选择。最常用的屏幕阅读器包括适用于桌面电脑的 JAWS、NVDA 和 VoiceOver，以及适用于移动设备的 VoiceOver 和 Talkback。

根据您的操作系统 (OS)、首选浏览器和所用设备，某个屏幕阅读器可能脱颖而出，成为最佳选择。大多数屏幕阅读器都是专为特定硬件和网络浏览器而构建的。当您将屏幕阅读器与未针对其校准的浏览器搭配使用时，可能会遇到更多“错误”或意外行为。屏幕阅读器在以下组合中效果最佳。

屏幕阅读器命令

为桌面设备或移动设备正确设置屏幕阅读器软件后，您应查看屏幕阅读器文档（见上表中链接）并运行一些基本屏幕阅读器命令，以熟悉该技术。如果您之前使用过屏幕阅读器，不妨考虑试用新屏幕阅读器！

使用屏幕阅读器进行无障碍功能测试时，您的目标是检测代码中会干扰网站或应用使用的问题，而不是模拟屏幕阅读器用户的体验。因此，只要掌握一些基础知识、了解一些屏幕阅读器命令并进行一些（或大量）练习，您就可以做很多事情。

如果您需要进一步了解使用屏幕阅读器和其他 AT 的用户的体验，可以与许多组织和个人互动，从而获得这类宝贵的洞见。请注意，使用 AT 针对一组规则测试代码，然后询问用户的体验，这两种方法通常会产生不同的结果。这两点都是打造完全包容的产品的重要方面。

桌面屏幕阅读器的按键命令

移动设备屏幕阅读器的按键命令

屏幕阅读器测试演示

为了测试我们的演示，我们在搭载 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 添加 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 中查看所有这些更改。

现在，您可以运用所学知识来检查自己的网站和应用的无障碍功能。

所有这些无障碍功能测试的目标是解决用户可能会遇到的尽可能多的问题。不过，这并不意味着完成测试后，您的网站或应用就完全符合无障碍标准。要获得最大成功，您可以在整个过程中设计具有无障碍功能的网站或应用，并将这些测试与其他发布前测试相结合。

检查您的理解情况

测试您对自动化无障碍功能测试的了解