本单元重点介绍如何使用辅助技术 (AT) 进行无障碍功能测试。残障人士可以使用 AT 来帮助增强、维持或提高执行任务的能力。
在数字领域，AT 可以：
- 否/低科技：头/嘴贴、手持放大镜、带大按钮的设备
- 高科技：声控设备、眼球追踪设备、自适应键盘/鼠标
- 硬件：开关按钮、人体工学键盘、自动刷新的盲文设备
- 软件：文字转语音程序、实时字幕、屏幕阅读器
我们建议您在整个测试工作流程中使用多种类型的测试 API。
屏幕阅读器测试基础知识
在本单元中，我们将着重介绍最受欢迎的数字 AT 之一，即屏幕阅读器。屏幕阅读器是一种软件，可读取网站或应用的底层代码。然后，它会将这些信息转换为用户的语音或盲文输出。
屏幕阅读器对盲人和盲人用户至关重要，但它们也可以让弱视、阅读障碍或认知障碍的用户受益。
浏览器兼容性
屏幕阅读器选项有多种。目前最热门的屏幕阅读器是适用于桌面设备的 JAWS、NVDA 和 VoiceOver，以及适用于移动设备的 VoiceOver 和 Talkback。
根据您的操作系统、喜爱的浏览器和使用的设备，选择一款屏幕阅读器可能会是最佳选择。大多数屏幕阅读器在构建时会考虑到特定的硬件和网络浏览器。将屏幕阅读器与未经校准的浏览器搭配使用时，您可能会遇到更多“错误”或意外行为。屏幕阅读器在下列组合中使用时效果最佳。
屏幕阅读器命令
正确设置适用于桌面设备或移动设备的屏幕阅读器软件后，您应查看屏幕阅读器文档（见上表中的链接），并运行一些基本的屏幕阅读器命令，以熟悉该技术。如果您之前使用过屏幕阅读器，不妨考虑尝试使用新的屏幕阅读器！
使用屏幕阅读器进行无障碍功能测试时，您的目标是检测代码中干扰网站或应用使用的问题，而不是模拟屏幕阅读器用户的体验。因此，借助一些基础知识、一些屏幕阅读器命令和一点（或大量）的练习，您可以执行很多操作。
如果您需要进一步了解使用屏幕阅读器和其他 AT 的用户的用户体验，可以与许多组织和个人互动，以获得这些宝贵的见解。请注意，使用 AT 根据一组规则测试代码并询问用户的体验通常会产生不同的结果。这两者都是打造具有全面包容性的产品的重要方面。
桌面屏幕阅读器的键盘快捷键
移动设备屏幕阅读器的按键命令
屏幕阅读器测试演示
为测试演示，我们在运行 MacOS 的笔记本电脑上使用 Safari 并捕获声音。您可以使用任意屏幕阅读器来逐步完成这些步骤，但您遇到某些错误的方式可能与本单元中的说明不同。
第 1 步
访问更新后的 CodePen， 已应用所有自动和手动无障碍功能更新。
请在调试模式下查看，以继续执行
接下来的测试。这一点很重要，因为此操作会删除 <iframe> 周围的
演示网页，这可能会干扰某些测试工具。详细了解
CodePen 的调试模式。
第 2 步
激活您选择的屏幕阅读器并转到演示页面。在关注具体问题之前，建议您先从上到下浏览整个页面。
在将修复措施应用到演示之前和之后，我们已针对每个问题记录了屏幕阅读器。我们建议您使用自己的屏幕阅读器来浏览演示。
问题 1：内容结构
标题和地标是用户使用屏幕阅读器进行导航的主要方式之一。如果没有这些信息，屏幕阅读器用户就必须阅读整个页面才能了解上下文。这可能需要很长时间，并让用户感到失望。如果您尝试按演示中的任一元素进行导航，会很快发现它们不存在。
- 地标示例：
<div class="main">...</div> - 标题示例：
<p class="h1">Join the Club</p>
如果您已正确更新所有内容，则应该不会有任何视觉变化，但屏幕阅读器体验将会显著改善。
<ph type="x-smartling-placeholder">
让我们解决这个问题。
有些无法访问的元素只是看一下网站无法发现。您可能还记得内容结构模块中的标题级别和语义 HTML 的重要性。一段内容可能看起来像标题，但内容实际上封装在风格化 <div> 中。
要解决标题和地标的问题，您必须先确定应进行相应标记的每个元素，并更新相关的 HTML。请务必同时更新相关的 CSS。
地标示例：<main>...</main>
标题示例：<h1>Join the Club</h1>
如果您已正确更新所有内容，则应该不会有任何视觉变化，但屏幕阅读器体验将会显著改善。
<ph type="x-smartling-placeholder">问题 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 中查看所有这些更改。
现在，您可以运用所学的知识回顾自己的无障碍功能 网站和应用
所有这些无障碍功能测试的目的是尽可能 用户可能会遇到的各种问题不过，这并不意味着您的网站或应用 完成后就可以正常访问了您可以借助 设计网站或应用时，确保整个过程中都具备无障碍功能； 将这些测试与您的其他发布前测试相结合。
检查您的理解情况
测试您对自动化无障碍功能测试知识的掌握情况
哪种屏幕阅读器最适合用于测试无障碍功能？
使用辅助技术进行测试的目的是什么？