到目前为止，在本课程中，您已了解了数字无障碍方面的个人、企业和法律方面的内容，以及数字无障碍方面的合规性的基础知识。您已经了解了与包容性设计和编码相关的特定主题，包括何时使用 ARIA 与 HTML、如何衡量色彩对比度、何时需要 JavaScript 以及其他主题。
在其余单元中，我们将从设计和构建转移到测试无障碍功能。我们将采用一个三步测试流程，包括自动化、手动和辅助技术测试工具和技术。我们将在这些测试模块中使用相同的演示，以使网页从无法访问变为可访问。
每项测试（自动化、手动和辅助技术）对于打造最易获取的产品都至关重要。
我们的测试以《网络内容无障碍指南》(WCAG) 2.1 A 级和 AA 级符合性作为我们的标准。请注意，您的行业、产品类型、当地/国家/地区的法律和政策，或者整体的无障碍功能目标将决定要遵循的准则和级别。如果您的项目不需要特定标准，建议您采用最新版本的 WCAG。请回顾“如何衡量数字无障碍？”，了解有关无障碍功能审核、一致性类型/级别、WCAG 和 POUR 的一般信息。
如您所知，在为残障人士提供支持时，无障碍功能合规性并不是完整信息。不过，这是一个很好的起点，因为它提供了一个可用于测试的指标。除了无障碍功能合规性测试，我们建议您采取其他措施，例如对残障人士进行易用性测试、聘请残障人士加入您的团队，或者咨询具备数字无障碍功能专业知识的个人或公司，以帮助您构建更具包容性的产品。
自动化测试基础知识
自动化无障碍功能测试使用软件扫描您的数字产品，以根据预定义的无障碍功能一致性标准扫描您的数字产品是否存在无障碍功能问题。
自动化无障碍功能测试的优点：
- 易于在产品生命周期的不同阶段重复测试
- 只需几步即可完成
- 几乎没有无障碍功能知识即可运行测试或理解结果
自动化无障碍功能测试的缺点：
- 自动化工具无法捕获您产品中的所有无障碍功能错误
- 报告的假正例（报告的问题并非真正违反 WCAG 政策）
- 不同的产品类型和角色可能需要多个工具
自动化测试是检查网站或应用无障碍功能的绝佳第一步，但并非所有检查都可以自动执行。我们将在手动无障碍功能测试模块中详细介绍无法自动检查的元素的无障碍功能。
自动化工具的类型
应用特殊技术中心 (CAST) 于 1996 年开发了第一批在线自动化无障碍功能测试工具，名为“Bobby Report”。如今，有 100 多种自动化测试工具可供选择！
自动化工具实现方式各不相同，从无障碍功能浏览器扩展程序、代码 linter、桌面和移动应用、在线信息中心，甚至可用于构建自己的自动化工具的开源 API 不一而足。
您决定使用哪种自动化工具可能取决于多种因素，包括：
- 您要按照哪些一致性标准和级别进行测试？其中可能包括 WCAG 2.1、WCAG 2.0、U.S. 508 条或修改的无障碍规则列表。
- 您要测试什么类型的数字产品？可以是网站、Web 应用、原生移动应用、PDF、自助服务终端或其他产品。
- 您要在软件开发生命周期的哪个环节测试产品？
- 设置和使用该工具需要多长时间？是针对个人、团队还是公司？
- 谁在执行测试：设计人员、开发者、质量检查人员等？
- 您希望多久检查一次无障碍功能？报告中应包含哪些详细信息？问题是否应直接与工单系统相关联？
- 哪些工具在您的环境中效果最好？您的团队？
除此之外，还有许多其他因素需要考虑。如需详细了解如何为您和您的团队选择最佳工具，请参阅 WAI 关于选择 Web 无障碍功能评估工具的文章。
演示：自动化测试
对于自动化无障碍功能测试演示，我们将使用 Chrome 的 Lighthouse。Lighthouse 是一款自动化的开源工具，旨在通过不同类型的审核（例如性能、搜索引擎优化 (SEO) 和可访问性等）来提升网页的质量。
我们演示了一个为虚构组织 Medical Mysteries Club 构建的网站。此网站被特意设置为无法访问，无法用于演示。某些无法访问的情况可能对您可见，而我们的自动化测试会捕获其中一些（但不是全部）错误。
第 1 步
使用 Chrome 浏览器安装 Lighthouse 扩展程序。
您可以通过多种方式将 Lighthouse 集成到测试工作流中。在本演示中，我们将使用 Chrome 扩展程序。
第 2 步
我们在 CodePen 中构建了一个演示版。在调试模式下查看该测试，以便继续进行后续测试。这一点非常重要，因为它会移除围绕演示网页的 <iframe>，这可能会干扰某些测试工具。详细了解 CodePen 的调试模式。
第 3 步
打开 Chrome 开发者工具，然后前往“Lighthouse”标签页。取消选中除“无障碍”以外的所有类别选项。保留默认模式，并选择要在其中运行测试的设备类型。
第 4 步
点击“Analyze page load”（分析网页加载）按钮，并给 Lighthouse 运行其测试的时间。
测试完成后，Lighthouse 会显示一个得分，该得分用于衡量您正在测试的产品的可访问性。Lighthouse 得分的依据是问题数量、问题类型以及对所检测到问题的用户的影响。
除了得分，Lighthouse 报告还包含有关其检测到的问题的详细信息，以及用于详细了解如何修复这些问题的资源链接。该报告还包含已通过或不适用的测试，以及需要手动检查的其他项的列表。
第 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 中的按钮元素中移除不准确的 ARIA 角色后，“订阅”一词会变为无障碍按钮的名称。此功能内置于语义 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：颜色对比度
背景颜色和前景颜色的对比度不足。 对许多用户而言，对比度低的文本都是难以阅读或无法阅读的。 详细了解色彩对比度规则。
报告了两个示例。
Medical Mysteries Club 的颜色十六进制值为 #01aa9d，背景十六进制值为 #ffffff。色彩对比度为 2.9:1。
查看完整尺寸的屏幕截图。
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 的色彩对比度要求。
Medical Mysteries Club 的颜色值为 #008576，背景仍为 #ffffff。更新后的色彩对比度为 4.5:1。
查看完整尺寸的屏幕截图。
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 无障碍功能审核。您的得分应该比首次运行时好得多。
我们已将所有这些自动无障碍功能更新应用到新的 CodePen。
后续步骤
太棒了！您已经完成了很多工作，但我们的工作尚未结束！接下来，我们将继续介绍手动检查，详见手动无障碍功能测试模块。
检查您的掌握程度
测试您对自动化无障碍功能测试知识的掌握情况
为了确保您的网站可以访问，您应该进行哪种测试？
自动测试会发现哪些错误？