到目前为止,您学习了有关个人、企业和 数字无障碍的法律方面,以及数字无障碍基础知识 一致性。您已经了解了与包容性设计相关的具体主题, 编码,包括何时使用 ARIA 与 HTML、如何测量色彩对比度, JavaScript 必不可少的时机,以及其他主题。
在其余单元中,我们将从设计、构建到测试, 以便实现无障碍功能我们将采用包含三个步骤的测试流程,包括 自动化、手动和辅助技术测试工具和技术。我们将 在这些测试模块中使用相同的演示,以从下级 无法访问。
每项测试(自动化测试、手动测试和辅助技术测试)对于实现 尽可能为他们提供最便捷的产品。
我们的测试遵循《网络内容无障碍指南》(WCAG) 2.1 符合级别 A 和 AA 的我们 标准。请注意,您所在行业、商品类型、当地/国家/地区的法律和 或整体无障碍目标将决定 以及要达到的级别。如果您没有针对 则建议您遵循最新版本的 WCAG。 请参阅如何衡量数字无障碍水平? 了解无障碍功能审核、一致性类型/级别 WCAG 和 POUR。
如您所知,在构建无障碍模型时,无障碍功能一致性并不能很好地满足 来支持残障人士。不过,建议您首先 因为它提供了供您测试的指标我们建议您 无障碍功能一致性测试之外的其他操作,例如 针对残障人士运行易用性测试,雇用残障人士 在团队中工作的残障人士,或者为有残障人士或 数字无障碍专业知识,帮助您打造更具包容性的产品。
自动化测试基础知识
自动化无障碍功能测试会使用软件扫描您的数字产品, 无障碍功能问题是否违反预定义的无障碍功能一致性标准。
自动化无障碍功能测试的优点:
- 可在产品生命周期的不同阶段轻松重复测试
- 只需简单几步,即可快速见效
- 只需极少的无障碍功能知识即可运行测试或理解结果
自动化无障碍功能测试的缺点:
- 自动化工具无法找出产品中的所有无障碍错误
- 报告的假正例(所报告的问题并非真正违反 WCAG 的行为)
- 不同的产品类型和角色可能需要多种工具
自动化测试是检查网站或应用是否 但并非所有检查都能自动完成。稍后我们将详细介绍 如何在 手动无障碍功能测试模块。
自动化工具的类型
首批在线自动无障碍功能测试工具之一是在 1996 年由应用特殊技术中心 (CAST) 颁布, “鲍比报告。”今天,我们有 100 多种自动化测试工具供您选择 来自!
自动化工具的实施方式不尽相同,从无障碍浏览器扩展程序到 代码 linter、桌面和移动应用、在线信息中心,甚至是 可用于构建自己的自动化工具的开源 API。
您决定使用哪种自动化工具取决于多种因素,包括:
- 你们要测试哪些合规性标准和等级?这可能会 包括 WCAG 2.1、WCAG 2.0、U.S.第 508 条或修改后的无障碍规则列表。
- 您正在测试哪种类型的数字产品?可以是网站、网络 应用、原生移动应用、PDF、自助服务终端或其他产品。
- 贵公司在软件开发生命周期的哪个环节测试产品?
- 设置和使用该工具需要多长时间?对于个人用户 团队还是公司?
- 谁来执行测试:设计人员、开发者、质量检查人员等?
- 您希望多久检查一次无障碍功能?应提供哪些详细信息 ?问题应与工单直接相关 系统?
- 哪些工具在您的环境中效果最佳?为您的团队提供助力?
除此之外,您还需要考虑许多其他因素。请参阅 WAI 的文章 on "选择网络无障碍功能评估工具 详细了解如何为您和您的团队选择最合适的工具。
演示:自动化测试
对于自动化无障碍功能测试演示,我们将使用 Chrome 的 Lighthouse。 Lighthouse 是一个开源的自动化工具,旨在提高 对网页进行各种审核,例如性能、搜索引擎优化和 无障碍功能。
我们演示的网站专为一个化妆品组织“医学之谜”(Merid Mysteries) 打造 俱乐部。此网站被特意设为无法访问演示页面。其中的部分 但有些设备(但不是全部)设备可能会 自动化测试
第 1 步
使用 Chrome 浏览器安装 Lighthouse 扩展程序。
您可以通过多种方式集成 Lighthouse 纳入测试工作流程我们将使用 Chrome 扩展程序进行演示。
第 2 步
![Medical Mystery Club 网站(在 iframe 之外)。](https://web.dev/static/learn/accessibility/test-automated/image/medical-mystery-club-webs-e2a5133679e05.png?authuser=0000&hl=zh-cn)
我们在 CodePen 中构建了一个演示。
请在调试模式下查看,以继续执行
接下来的测试。这一点很重要,因为此操作会删除 <iframe>
周围的
演示网页,这可能会干扰某些测试工具。详细了解
CodePen 的调试模式。
第 3 步
打开 Chrome 开发者工具,然后 转到“Lighthouse”标签页取消选中除以下类别之外的所有类别选项: “无障碍。”将模式保留为默认模式,然后选择您要使用的设备类型 以及这些测试所依据的
![Medical Mystery Club 网站,其中的 Lighthouse 报告开发者工具面板处于打开状态。](https://web.dev/static/learn/accessibility/test-automated/image/medical-mystery-club-webs-b8acbfa65d47a.png?authuser=0000&hl=zh-cn)
第 4 步
点击“分析网页加载”按钮,并为 Lighthouse 留出时间来运行测试。
测试完成后,Lighthouse 会显示一个分数,用于衡量 哪些产品可以访问您测试的产品通过 Lighthouse 得分 根据问题的数量、问题类型以及对 检测到的问题
除了分数之外,Lighthouse 报告还包含有关 检测到的问题,以及指向相关资源的链接,以便您详细了解如何补救 。该报告还包含已通过或不适用的测试,以及 要手动检查的其他项目的列表。
![在 2022 年 12 月的测试中,医学神秘俱乐部网站的 Lighthouse 得分获得了 62 分。](https://web.dev/static/learn/accessibility/test-automated/image/the-medical-mysteries-clu-d82b5b2a9455b.png?authuser=0000&hl=zh-cn)
第 5 步
现在,我们来看看每个自动化无障碍功能问题的示例 发现并修正相关样式和标记。
问题 1:ARIA 角色
第一个问题指出:“具有 ARIA [角色] 且要求子级 特定 [role] 缺少部分或全部子级。 一些 ARIA 父级角色必须包含特定的子级角色才能执行其 预期无障碍功能。" 详细了解 ARIA 角色规则。
在演示中,简报订阅按钮无法使用:
<button role="list" type="submit" tabindex="1">Subscribe</button>
“订阅”输入字段旁边的按钮包含不正确的 ARIA 角色 。在这种情况下,可以完全移除该角色。
<button type="submit" tabindex="1">Subscribe</button>
问题 2:ARIA 隐藏
"[aria-hidden="true"]
元素包含可聚焦的后代。可聚焦
[aria-hidden="true"]
元素中的后代会阻止这些交互式
辅助技术(例如屏幕)的用户
读者。详细了解 aria-hidden
规则。
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
输入字段应用了 aria-hidden="true"
属性。正在添加
此属性用于隐藏元素(及其下嵌套的所有内容),
辅助技术。
<input type="email" placeholder="Enter your e-mail address" tabindex="-1" required>
在这种情况下,您应从输入中移除此属性,以便用户 使用辅助技术访问信息并在表单字段中输入信息。
问题 3:按钮名称
按钮没有可供访问的名称。如果某个按钮没有 屏幕阅读器会将它读出为“按钮”使其无法用于 屏幕阅读器用户。 详细了解按钮名称规则。
<button role="list" type="submit" tabindex="1">Subscribe</button>
当您在 问题 1,“订阅”一词会成为无障碍按钮 名称。此功能内置于语义 HTML 按钮元素中。那里 是适合在更复杂的情况下考虑的其他模式选项。
<button type="submit" tabindex="1">Subscribe</button>
问题 4:图片 alt 属性
图片元素缺少 [alt]
属性。信息性元素应力求
是简短的描述性替代文字装饰性元素可以被忽略,
alt 属性为空。详细了解图片替代文本
规则。
<a href="index.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/….png">
</a>
由于徽标图片也是一个链接,您可以通过 图片模块,这种模块称为可操作的 图片,并需要关于图片用途的替代文本信息。 通常,页面上的第一张图片是一个徽标,因此您可以合理地假定 您的 AT 用户会知道这一点,因此,您可能决定不添加 背景信息。
<a href="index.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/….png"
alt="Go to the home page.">
</a>
问题 5:链接文字
链接没有可识别的名称。链接文字(以及图片的替代文字、 清晰可辨、独特并可聚焦,可以提高 屏幕阅读器用户的导航体验。 详细了解链接文字规则。
<a href="#!"><svg><path>...</path></svg></a>
网页上所有可操作的图片都必须包含
该链接将发送给用户解决此问题的一种方法是
添加有关用途的文字,就像在
示例。这非常适合使用 <img>
标记的映像,但 <svg>
代码无法使用此方法。
对于使用 <svg>
标记的社交媒体图标,您可以使用
不同的备选说明格式
目标 SVG,在 <a>
和 <svg>
标记之间添加信息,然后添加
对用户隐藏位置、添加支持的 ARIA 或其他选项。取决于
与您的环境和代码限制有关,有一种方法可能比
另一个。我们使用辅助性最强的最简单的模式选项
技术覆盖率,即向 <svg>
标记添加 role="img"
,以及
其中包括一个 <title>
元素。
<a href="#!">
<svg role="img">
<title>Connect on our Twitter page.</title>
<path>...</path>
</svg>
</a>
问题 6:颜色对比度
背景色和前景色没有足够高的对比度。 对许多用户而言,对比度低的文本都是难以阅读或无法阅读的。 详细了解色彩对比度规则。
报告了两个示例。
![所报告的俱乐部名称的 Lighthouse 得分。蓝绿色值的对比度过低。](https://web.dev/static/learn/accessibility/test-automated/image/lighthouse-score-reporte-af04ad770bec8.png?authuser=0000&hl=zh-cn)
Medical Mysteries Club
”的十六进制颜色值为 #01aa9d
,背景十六进制值为 #ffffff
。色彩对比度为 2.9:1。
查看完整尺寸的屏幕截图。
![美人鱼综合征文案的 Lighthouse 得分。灰色值的对比度过低。](https://web.dev/static/learn/accessibility/test-automated/image/lighthouse-score-mermaid-5f4e668961b19.png?authuser=0000&hl=zh-cn)
Mermaid syndrome
的文本十六进制值为 #7c7c7c
,而背景的十六进制颜色为 #ffffff
。色彩对比度为 4.2:1。
查看完整尺寸的屏幕截图。
在网页上检测到许多色彩对比度问题。正如您在本课程中学习的 颜色和对比度模块, 常规大小的文字(小于 18pt / 24px)的色彩对比度要求为 4.5:1,大号文字(至少 18pt / 24px 或 14pt / 18.5px 粗体)和 基本图标必须符合 3:1 的要求。
对于网页标题,蓝绿色文字需要符合 3:1 的色彩对比度 要求,因为它是 24 像素的大号文字。不过,蓝绿色按钮 则视为常规尺寸的文字,以 16px 的粗体显示,因此必须符合 4.5:1 的颜色要求 对比度要求
在本例中,我们可以找到足够深的青色,达到 4.5:1 的比例,或者 我们可以将按钮文字的大小增加到 18.5px,并将 蓝绿色值。这两种方法都可以与设计保持一致 美学。
除了 显示网页上两个最大的标题此文本必须调暗才能符合要求 符合 4.5:1 色彩对比度要求
![蓝绿色问题已修复,不再失败。](https://web.dev/static/learn/accessibility/test-automated/image/the-teal-has-been-fixed-75eedf96c76dc.png?authuser=0000&hl=zh-cn)
Medical Mysteries Club
的颜色值为 #008576
,背景保留为 #ffffff
。更新后的色彩对比度为 4.5:1。
查看完整尺寸的屏幕截图。
![灰色问题已修复,不再失败。](https://web.dev/static/learn/accessibility/test-automated/image/the-grey-has-been-fixed-9565d8db1005e.png?authuser=0000&hl=zh-cn)
Mermaid syndrome
现在的颜色值为 #767676
,背景保留为 #ffffff
。色彩对比度为 4.5:1。
查看完整尺寸的屏幕截图。
问题 7 - 列表结构
列表项 (<li>
) 未包含在 <ul>
或 <ol>
父元素中。
屏幕阅读器要求列表项 (<li>
) 必须包含在父项中
<ul>
或 <ol>
才能正确播报。
<div class="ul">
<li><a href="#">About</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">Subscribe</a></li>
</div>
在此演示中,我们使用 CSS 类来模拟无序列表,而不是
使用 <ul>
标记。当我们以不正确的方式编写此代码时,
此标记中内置的语义 HTML 功能。通过将类替换为真实的
<ul>
标记,并修改相关 CSS,我们就可以解决此无障碍功能问题。
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">Subscribe</a></li>
</ul>
问题 8 - tabindex
某些元素的 [tabindex] 值大于 0。值大于 0 表示明确的导航顺序。虽然这在技术上有效 会给依赖辅助技术的用户带来糟糕的体验。 详细了解 tabindex 规则。
<button type="submit" tabindex="1">Subscribe</button>
除非有特殊原因破坏网站上的自然 Tab 键顺序
那么 tabindex 属性无需使用正整数。接收者
保留自然 Tab 键顺序,我们可以将 tabindex 更改为 0
或
完全移除该属性。
<button type="submit">Subscribe</button>
第 6 步
现在您已经解决了所有自动无障碍功能问题,接下来,创建一个新的 调试模式页面。再次运行 Lighthouse 无障碍功能审核。您的得分 效果应该比首次运行时好得多。
![灯塔的分数现在为 100 分,这意味着您已解决 Lighthouse 的所有问题。](https://web.dev/static/learn/accessibility/test-automated/image/the-lighthouse-score-is-b895d11c20c52.png?authuser=0000&hl=zh-cn)
我们已将所有这些自动无障碍功能更新应用到了 CodePen。
下一步
太棒了!您已经完成了很多工作,但我们还没有完成!接下来 我们接下来会进行手动检查,详情请参阅 手动无障碍功能测试模块。
检查您的理解情况
测试您对自动化无障碍功能测试知识的掌握情况
您应该进行何种测试来确保您的网站可以访问?
自动化测试发现了哪些错误?