本单元重点介绍如何使用辅助技术 (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 中查看所有这些更改。
现在,您可以运用所学的知识回顾自己的无障碍功能 网站和应用
所有这些无障碍功能测试的目的是尽可能 用户可能会遇到的各种问题不过,这并不意味着您的网站或应用 完成后就可以正常访问了您可以借助 设计网站或应用时,确保整个过程中都具备无障碍功能; 将这些测试与您的其他发布前测试相结合。
检查您的理解情况
测试您对自动化无障碍功能测试知识的掌握情况
哪种屏幕阅读器最适合用于测试无障碍功能?
使用辅助技术进行测试的目的是什么?