学习无障碍测试基础知识

学习目标

完成本单元后，您将能够：

认识到无障碍测试的重要性。
总结自动化无障碍测试的优缺点。
确定可用于自动化无障碍测试的工具。
描述编写自动化无障碍测试的策略。

我们为什么要进行无障碍测试？

无障碍测试有助于确保数字产品（例如网站和应用程序）对所有人都可用，包括残障人士。这就意味着要在用户遇到无障碍屏障之前就发现并消除屏障。理想情况下，一开始就应该没有任何无障碍错误，但事实上，在开发过程中错误确实会发生。在开发产品时，您的目标始终是确保这些错误不会影响到您的用户。

理想情况下，无障碍测试应该贯穿整个开发生命周期，从设计阶段开始，持续到开发阶段，甚至在部署之后也会继续进行。通过这种积极主动的方法，您可以确保在每个阶段都考虑到无障碍并将其融入其中。

执行无障碍测试有助于：

打造包容性的数字体验，提供平等的访问机会。
满足法规和法律要求。
触达更广泛的用户群体。
改善整体用户体验。

在本模块中，我们将介绍自动化测试和手动测试，这两者对于提供全面的无障碍测试都至关重要。我们先来看自动化无障碍测试。

自动化无障碍测试的优缺点

正如您可能已经了解的那样，通过自动化无障碍测试，您可以快速评估您的数字产品是否符合无障碍标准。例如，自动化测试软件可以扫描一个网站，并识别出各种无障碍屏障，从缺失替用文本到色彩对比度不足，再到缺失标题等。自动化测试流程能够提高效率、增强一致性，并且有助于实现更出色的可扩展性。

一位开发人员正在进行自动化无障碍测试。

尽管自动化测试有很多优势，但一定要注意的是，它可能会遗漏严重的无障碍问题，以及需要基于人类理解和上下文才能判断出来的更微妙的无障碍屏障。例如，自动测试未必会标记出被当作标题使用的文本图像。它也无法评估无障碍屏障对用户的实际影响。要实现最全面的无障碍评估，请始终将手动无障碍测试与自动测试结合使用。

在自动化您自己的无障碍测试时，结合使用预构建的测试实用程序和自定义测试用例来捕捉用户界面中的无障碍回归。iOS 和 Android 的移动测试框架包括基本的无障碍检查。如果您使用本机代码开发功能，请添加测试以执行测试框架支持的基本检查。有关移动端测试的更多信息，请查看本单元最后的“资源”部分。

使用无障碍测试工具

您可以使用多种自动化或半自动化工具来进行无障碍测试。其中的大多数工具会将内容与 Web 内容可访问性指南 (WCAG) 进行比较，识别出无障碍屏障。以下是对几种有用工具的说明。

工具	是什么	作用
Axe	一个开源测试工具，适用于网站及其他基于 HTML 的用户界面，可提供全面的无障碍测试。	允许您在编码时捕获无障碍错误，并与现有测试环境集成，以便您可以自动化无障碍测试。
WAVE	一套免费的评估工具，可帮助您识别影响残障用户的常见无障碍屏障，例如对比度低或缺失替用文本	使用图标和指示器突出显示许多无障碍问题，并促进完成对 Web 内容的人工评估
Google Lighthouse	一个开源自动化工具，用于审计无障碍问题，包括 WCAG 违规情况	执行无障碍审计并打分（100 分制），以反映页面的无障碍水平
Linters	自动化工具（例如 GitHub: infofarmer / eslint-plugin-jsx-a11y 和 GitHub: reactjs / react-a11y），可以从一开始就集成到开发生命周期中，防止出现无障碍问题和违规行为	分析 HTML、CSS 和 JavaScript 等源代码是否存在无障碍屏障，例如键盘导航问题、标题和地标的不当使用等
sa11y	一套由 Salesforce 创建的开源 JavaScript 库，可帮助您编写自动化无障碍测试	使您能够检测机器可知的静态 DOM 无障碍问题

请注意，使用这些工具进行的测试并不全面。即使您的代码通过了所有测试，也不能保证您的产品完全无障碍。但是，这些测试确实会暴露出主要的无障碍问题，执行这些测试有助于确保回归永远不会使您的代码无法访问。建议您在进行自动化测试的同时，务必要执行手动测试，以确保完成全面的无障碍评估。稍后您将了解有关手动测试的更多信息。

编写您自己的无障碍测试

如果您为了让组件无障碍而做了大量工作，您想要确保它保持这种状态。您可以针对各种无障碍问题编写自动测试，包括预期的键盘功能以及 HTML 元素的 ARIA 值是否正确。

示例：测试 Lightning 按钮

以下是一段用于 Lightning Web 组件 (LWC) Jest 测试的伪代码，该测试创建了一个 Lightning 按钮，并验证了组件的结构是否无障碍。

registerSa11yMatcher();
const element = createButton({
    label: 'Submit',
    variant: 'brand-outline',
    title: 'This is a submit button',
});
const button = shadowQuerySelector(element, 'button');


return Promise.resolve().then(async () => {
    await expect(button).toBeAccessible();
});

在此示例代码中，首先您需要注册 sa11y，才能够对组件执行无障碍检查。然后，您要创建一个具有标签、特定变体和标题的按钮。接下来，找到此按钮并将其分配给一个变量。最后，要引入无障碍检查，您需要使用异步函数调用对该按钮执行无障碍性检查。

在 Jest 中检查某个元素是否无障碍时，需获取该元素的 HTML 结构，并根据 WCAG 标准进行验证。这包括确保为正在呈现的元素设置的所有 ARIA 属性都是正确的。

以上就是一些无障碍测试的基础知识。准备好将这些原则付诸实践了吗？继续阅读以了解如何执行键盘和屏幕阅读器测试。

时间估计

主题

需要帮助？

Salesforce Platform 资源