Web Accessibility 测试实践

Web Accessibility 介绍

Accessibility 测试是属于可用性测试（Usability Testing）中的一种测试类型，它主要是测试软件系统是否有方便让残疾人使用的能力，是要保证残疾人和弱势群体，在任何时间、地点、设备，都能平等的、便利、无障碍地获取信息、利用信息。这些能力包括每个输入框和按钮有特定的标签让阅读软件可以阅读这些 UI 组件，这样可以方便盲人使用；UI 界面上的颜色和对比度需要足够明显，这样方便色弱的人使用等。

不同的国家和组织制定了大量不同的 Web Accessibility 标准，比如美国政府的标准 Section 508 legislation，德国政府的标准 BITV 和 W3C 组织的 Web Content Accessibility Guidelines (WCAG)。其中 W3C 的 WCAG 使用范围最广，但是对于不同国家和地区也需要遵循相应国家特有的标准。比如在美国，如果某个公司的 Web 系统产品无法达标 508 legislation，就有可能面临法律风险。所以如果 Web 系统产品需要在不同国家进行销售和使用，就需要关注并实施相应的 Web Accessibility。

为了检验一个 Web 系统是不是满足客户以及国家对于 Accessiblity 的要求，需要对 Web 页面进行，其测试类型包含两类：手动测试和自动测试。现在已经有了比较成熟的手动和自动测试的工具和方案。

如何手动测试 Web Accessibility

实施 Web Accessibility Testing 最为简单的办法就是使用特定的 Web Accessibility Evaluation 工具，现在业界有上百款这样的工具。这些工具基本包含了支持 WCAG1.0，2.0 和 2.1，以及各个不同国家的标准。其中最为常用的免费同居就是 WAVE 和 Lighthouse。这两款工具都是作为浏览器的扩展工具，十分简单易用。

1，WAVEWAVE 是一个传统的老牌工具，通过浏览器插件的方式支持 Firefox 和 Chrome 两款浏览器。使用的时候首先从两个浏览器的插件商店中安装 WAVE 的插件，然后手动打开需要进行测试的页面，点击浏览器的插件工具栏中的 WAVE，然后就完成了测试，测试结果就直接显示在当前页面上，见下图：

w1.png

2，LighthouseLighthouse 是 Chrome 浏览器的 Developer Tool 中自带的工具，所以使用十分简单。首先打开 Developer Tool，并在其中选择 Lighthouse，然后勾选 Accessibility 并点击 Generate report 按钮，然后就能获得测试结果，见下图：

w2.png

如何自动化测试 Web Accessibility

手动 Web Accessibility 测试有两个问题：1，无法测试一些特殊的场景，比如会动态显示并消失的 Loading 界面，会动态显示并消失的进度条等；2，无法在持续流水线中按照定制化的标准来实施持续 Web Accessibility 测试。如果遇到这两个问题，并且有这两个需求，就需要实施自动化 Web Accessibility 测试。

自动化 Web Accessibility 测试实施的本质就是在最 Web UI 功能测试的时候，调用相应的 Web Accessibility 测试库，然后根据所需的标准配置这个测试库。然后当 Web UI 功能测试的运行的同时就可以进行 Web Accessibility 测试。如果测试库发现 Web 页面上的某个组件不符合设定的标准，然后就会报错并生成相应的测试报告。如果是在流水线上执行这些测试，就可以对持续更新的 Web 系统进行持续的测试。

下面以 Cypress 为例讲解如何实施自动化的 Web Accessibility 测试。首先安装一个名为 cypress-axe 的 Cypress 插件，然后在每个需要测试 Web Accessibility 的页面出现的阶段调用 checkA11y 方法就可以了：

it('Has no a11y violations after button click', () => {cy.get('button').click()cy.checkA11y()})

如果需要指定满足特定标准，还可以设置成按照特定的标准来进行测试，比如：

cy.checkA11y('.example-class', {

runOnly: {  type: 'tag',  values: ['wcag2a']}

})

然后执行 Web UI 功能测试，就能完成相应 Web 页面的测试，测试结果也会直接显示在 Cypress 的测试结果里面，如果发现不符合标准的页面，测试就会报错，如下图：

w3.png

最终在持续构建流水线上执行加了 Web Accessiblity 的测试就可以 Web UI 功能测试，就能实施持续 Web Accessibility 测试。

总结

Web Accessibility 测试是属于非功能测试的一种，对于面向大众的 Web 系统非常重要，特别是面向多个国家的 Web 系统更为重要。但是由于 Accessibility 标准的细节特别多，导致很多程序员并没有足够的知识在开发的过程中就编写出满足标准的代码，所以绝大部分情况下都是需要进行相应的 Accessibility 测试才能知道系统是不是满足标准。其中手动 Accessibility 测试是一种成本非常低，且易于实施的方法，所以大部分项目中都会使用这种方式。但是对于 Accessibility 要求非常高并且需要全覆盖的项目，则需要使用自动化的方式进行测试。如果你的 Web 系统希望能让残障人士更易于使用，并且不想违反相应国家和地区的相关法律，请进行 Web Accessibility 测试吧！