辅助技术测试

通过集合保持井井有条 根据您的偏好保存内容并对其进行分类。

本模块重点介绍如何使用辅助技术 (AT) 进行无障碍功能测试。残障人士可以使用 AT 来帮助增强、维持或提高执行任务的能力。

在数字领域，AT 可以是

• 无技术或低技术：头部和嘴部操作杆、手持放大镜、带大按钮的设备
• 高科技：声控设备、眼动追踪设备、自适应键盘和鼠标
• 硬件：开关按钮、人体工程学键盘、自动刷新盲文设备
• 软件：文本转语音程序、实时字幕、屏幕阅读器

我们鼓励您在整体测试工作流程中使用多种类型的 AT。

屏幕阅读器测试基础知识

在本模块中，我们将重点介绍最流行的数字 AT 之一：屏幕阅读器。屏幕阅读器是一种软件，可以读取网站或应用程序的底层代码。然后，它将该信息转换为语音或盲文输出供用户使用。

屏幕阅读器对于盲人和聋盲人至关重要，但它们也可以使视力低下、阅读障碍和认知障碍人士受益。

浏览器兼容性

有多种屏幕阅读器选项可用。最流行的屏幕阅读器是适用于台式计算机的 JAWS、NVDA 和 VoiceOver，以及适用于移动设备的 VoiceOver 和 Talkback。

根据您的操作系统 (OS)、喜欢的浏览器以及您使用的设备，一种屏幕阅读器可能会成为最佳选择。大多数屏幕阅读器都是考虑到特定的硬件和 Web 浏览器而构建的。当您将屏幕阅读器与未针对其校准的浏览器一起使用时，您可能会遇到更多“错误”或意外行为。屏幕阅读器在以下组合中使用时效果最佳。

屏幕阅读器命令

一旦您为台式机或移动设备正确设置了屏幕阅读器软件，您应该查看屏幕阅读器文档（在前面的表格中链接）并浏览一些基本屏幕阅读器命令，以熟悉该技术。如果您以前使用过屏幕阅读器，请考虑尝试新的屏幕阅读器！

当使用屏幕阅读器进行无障碍功能测试时，您的目标是检测代码中干扰网站或应用程序使用的问题，而不是模仿屏幕阅读器用户的体验。因此，凭借一些基础知识、几个屏幕阅读器命令和一点（或很多）练习，您可以做很多事情。

如果您需要进一步了解使用屏幕阅读器和其他 AT 的用户的体验，您可以与许多组织和个人互动，以获得这种宝贵的见解。请记住，使用 AT 根据一组规则测试代码和询问用户他们的体验通常会产生不同的结果。两者都是创建完全包容性产品的重要方面。

桌面屏幕阅读器的主要命令

移动屏幕阅读器的主要命令

屏幕阅读器测试演示

为了测试我们的演示，我们使用了 macOS 笔记本电脑上的 Safari 并捕获了声音。您可以使用任何屏幕阅读器完成这些步骤，但您遇到某些错误的方式可能与本模块中的描述不同。

步骤 1

访问更新后的 CodePen，其中应用了所有自动化和手动无障碍功能更新。

在 调试模式下查看它以继续进行下一个测试。这很重要，因为它移除了包围演示网页的 <iframe>，这可能会干扰某些测试工具。了解有关 CodePen 调试模式的更多信息。

步骤 2

激活您选择的屏幕阅读器并转到演示页面。在关注特定问题之前，您可以考虑从上到下浏览整个页面。

我们记录了每个问题的屏幕阅读器，包括应用修复程序之前和之后。我们鼓励您使用自己的屏幕阅读器运行演示。

问题 1：内容结构

标题和地标是人们使用屏幕阅读器导航的主要方式之一。如果这些不存在，屏幕阅读器用户必须阅读整个页面才能理解上下文。这可能会花费大量时间并引起挫败感。

如果您尝试通过演示中的任一元素进行导航，您会很快发现它们不存在。

• 地标示例：<div class="main">...</div>
• 标题示例：<p class="h1">加入俱乐部</p>

如果您已正确更新所有内容，则不应有任何视觉变化，但您的屏幕阅读器体验将得到显着改善。

让我们修复它。

仅查看网站无法观察到某些不可访问的元素。您可能还记得 内容结构 模块中标题级别和语义 HTML 的重要性。一段内容可能看起来像标题，但实际上内容包含在样式化的 <div> 中。

要修复标题和地标的问题，您必须首先识别每个应标记为此类的元素，并更新相关的 HTML。请务必同时更新相关的 CSS。

• 地标示例：<main>...</main>
• 标题示例：<h1>加入俱乐部</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。但是，屏幕阅读器找到了它并将其宣布为“image”，而没有其他信息。即使没有显式地向 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 中查看所有这些更改。

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

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

检查您的理解情况

测试您对自动化无障碍功能测试的知识。