本单元重点介绍如何使用辅助技术 (AT) 进行无障碍功能测试。残障人士可以使用 AT 来帮助提升、维持或改善执行相关任务的能力。
在数字领域，AT 可以是：
- 否/低科技：头/嘴棒、手持放大镜、带大按钮的设备
- 高科技：声控设备、眼动跟踪设备、自适应键盘/鼠标
- 硬件：开关按钮、人体工学键盘、自动刷新的盲文设备
- 软件：文字转语音程序、实时字幕、屏幕阅读器
我们建议您在整个测试工作流程中使用多种类型的 AT。
屏幕阅读器测试基础知识
在本单元中，我们将着重介绍一种最受欢迎的数字 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，但屏幕阅读器找到了它，并在没有额外信息的情况下将其读出为“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 中查看所有这些变更。
现在，您可以运用所学的知识来检查自己的网站和应用的无障碍功能。
所有这些无障碍功能测试的目标是解决用户可能会遇到的尽可能多的问题。不过，这并不意味着在完成测试后，您的网站或应用将可以完全访问。这样做最成功的方法是，在整个过程中设计具有无障碍功能的网站或应用，并将这些测试与其他发布前测试相结合。
检查您的掌握程度
测试您对自动化无障碍功能测试知识的掌握情况
用于测试无障碍功能的最佳屏幕阅读器是什么？
使用辅助技术进行测试的目的是什么？