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

2，Lighthouse
Lighthouse是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测试吧！

标签: none