如何对web系统开展无障碍测试

Accessibility test（无障碍测试）是一种测试方法，旨在评估软件、网站或其他数字产品的可访问性，以确保它们能够被身体残障或其他特殊需求的用户使用。这些测试通常包括使用辅助技术，如屏幕阅读器和放大器，以模拟各种用户体验，并检查是否符合国际标准和法律要求的无障碍标准，例如 Web Content Accessibility Guidelines (WCAG) 和 Section508等。 Accessibility test 的目的是确保数字产品对所有用户都具有可用性、可理解性和可操作性，无论他们是否有残障、老年人、临时伤残、非母语用户等等。

对于一个web系统，如何开展无障碍测试呢？首先需要了解无障碍标准，例如WCAG和Section508等，其次是借助一些工具进行自动扫描，在fix扫描出来的issue的基础上再配合一些辅助工具开展全面的手动测试。

无障碍标准理解

WCAG 是 Web Content Accessibility Guidelines（Web 内容可访问性指南）的缩写，是由万维网联盟（W3C）发布的国际无障碍标准。WCAG 包括一系列技术标准和指南，帮助网站设计者和开发者创建无障碍的 web 内容，以便更好地服务于广大用户。

WCAG 涵盖了一系列无障碍性原则和准则，包括以下三个级别：

1. A 级别：基本无障碍性要求。这些要求是最重要的，必须满足才能让许多残障用户使用网站。

2. AA 级别：中等无障碍性要求。这些要求可以提高残障用户的访问体验，使大多数用户更容易使用网站

3. AAA 级别：最高无障碍性要求。这些要求对于某些用户群体来说非常重要，但对于大多数用户来说可能并不必要。通常情况下，如果企业要开展无障碍测试，一般要达到AA级别。

WCAG 定义了 4 个无障碍性原则（POUR）：

1. 可感知性（Perceivable）：用户必须能够感知所有内容和界面组件，包括文本、图像、音频和视频等

2. 可操作性（Operable）：用户必须能够使用界面组件和导航，例如键盘和鼠标等。

3. 理解性（Understandable）：用户必须能够理解内容和如何操作界面组件，以及如何浏览网站。

4. 健壮性（Robust）：内容必须能够在不同的浏览器和辅助技术中运行，以确保用户能够访问内容。

WCAG 还提供了多种技术和方法来实现这些要求，包括 HTML、CSS、JavaScript、ARIA 等。WCAG 是业界公认的最具权威性和可信度的无障碍标准之一，它的指南和技术标准已成为全球无障碍设计和开发的基准。在进行 web 系统的无障碍测试时，WCAG 标准是一个必须参考的依据，测试人员应该使用 WCAG 的指南和技术标准来检查 web 内容的可访问性，并确保其符合相关标准。

Section 508 是美国联邦政府为了保障残障人士的权益而颁布的一项法规。该法规规定，所有联邦政府机构和与政府合作的企业和组织必须确保其数字产品和服务对残障人士可访问，包括对视觉、听觉、身体和认知障碍的人士都应具备可访问性。

中国也指定了"互联网内容无障碍可访问性技术要求与测试方法",里面的很多规则在WCAG中已经包含。总结而言，因为WCAG提供了详细的技术标准和指南，且使用广泛，建议以WCAG为主要参考标准，对web网站开展Accessibility Test。

无障碍测试扫描工具

支持无障碍扫描的工具很多，例如axe，wave，lighthouse等，这三个工具都是以插件方式运行，即在浏览器上安装这些插件，即可扫描目标网页，这些工具的差异点是内置的无障碍规则不同，也就是扫描出来的结果会有所不同。此篇博客会逐一介绍如何使用这三个工具进行无障碍测试，其中会重点介绍axe，因为axe提供了非常丰富的功能。为了学习这些工具，首先来了解下无障碍测试工具的工作原理。无障碍扫描工具的工作原理如下：

5. 网站抓取：无障碍扫描工具会首先对 web 系统进行网站抓取，收集系统中的所有页面、链接、表单等等，以便后续的检查和分析。

6. 分析检查：扫描工具会针对 WCAG 或其他相关标准进行自动化的检查和分析，比如检查图像的替代文本、表单控件的标签、语言和语义的正确性等等。

7. 问题报告：扫描工具会生成一个详细的问题报告，列出检测到的无障碍问题和建议的解决方案。这个报告可以帮助测试人员识别和修复 web 系统中的无障碍问题。

在了解了基本工作原理后，接下来先学习如何使用axe工具进行无障碍测试。axe包括几方面：

Axe-core：Axe-core是一个无障碍测试的开源JavaScript库。该库可以与已有的UI自动化工具集成，完成无障碍的自动化测试，例如axe-core可以和puppeteer或者selenium集成，详细demo可下载官网的demo运行。另外，UI自动化测试工具Cypress也提供了cypress-axe插件，使用该插件可以在cypress脚本上增加无障碍测试。

Axe-devTools: Axe-devTools又分为免费版本和收费版本，对于Axe-devTools-free本质上是将axe-core封装在易于使用的界面中，因此您可以进行自动化测试并查看结果，而无需构建自己的界面。axe DevTools Free扩展程序可在Chrome、Edge和Firefox浏览器中使用。

Axe-devTools-Pro：Axe-devTools收费版本，Axe DevTools Pro在axe DevTools Free（具有友好界面的浏览器内测试）的基础上增加了Intelligent Guided Testing™模块，通过引导完成手动无障碍测试来提高测试效率和质量。

相较于免费版本，Axe-devTools的收费版本和企业版本提供了如下了定制化功能，Prd版本可以免费试用7天，此篇博客重点介绍如何利用Axe-devTools-Pro开展无障碍测试。

要使用Axe-devTools非常简单，在浏览器上安装插件，打开目标web网站，开启扫描即可，具体如下图所示：

扫描完成后会给出具体的issue个数，还可查看每个issue详细信息以及改进建议，因为axe-devTools是是基于axe-core封装的，所以，要检查axe覆盖了哪些无障碍标准，可以下载axe-core的代码，在代码的/lib/rules目录下可以查看到所有的rules，具体如下图所示：

Axe-devTools Pro使用

虽然Axe DevTools是一种非常有用的工具，但它并不能完全覆盖所有的可访问性测试，所以还需要手动测试才能覆盖所有的无障碍规范，为了提升手动测试的效率，Pro版本提供了智能指导测试，可以理解成半手动测试提升测试效率。那为什么Axe DevTools不能覆盖所有的无障碍测试呢？具体原因如下所示：

1. 依赖页面结构和语义化：Axe DevTools依赖于页面中的结构和语义信息来进行测试，如果页面没有正确的结构或语义信息，那么Axe DevTools可能无法检测到所有的可访问性问题。

2. 无法模拟交互：Axe DevTools无法模拟用户的交互，例如使用键盘或屏幕阅读器进行操作。因此，它可能无法检测到所有与交互有关的可访问性问题。

3. 依赖于特定的技术和标准：Axe DevTools依赖于特定的Web技术和标准来进行测试，例如ARIA（可访问性富互联网应用程序）和HTML5。如果页面没有正确使用这些技术和标准，那么Axe DevTools可能无法检测到相关的可访问性问题。

4. 不包括所有的可访问性规则：Axe DevTools包括了许多可访问性规则，但它不包括所有的规则。因此，Axe DevTools可能无法检测到所有的可访问性问题。

接下来看看如何使用Axe-devTools Pro中的智能指导测试，智能指导测试包括Table/Keyboard/Modal Dialog/Interactive element/Structure/Images/Forms 七个部分，以Keyboard为例，来看看如何使用智能引导测试。

选择Keyboard后，devTools会自动扫描出页面上的Tab，并在页面上进行标注，此时只能引导显示“We’ve detected some elements in the tab order which lack a role which indicates interactivity to assistive technology”，让人手动确认页面标注的tab是否是所有的tab，如果有遗漏的，可以手动选择元素增加上去，然后每个元素有多个选项，例如：Element is interactive/Element is a scrollable region/Element is neither interactive nor scrollable，人工review，确认每个tab应该选择哪个选项，选择完成后，devTools完成分析，并给出issue细节，点击具体的issue，可以链接到issue的background，good example，bad example，fix suggesstion等，帮助开发人员更好的理解为什么这个是个Accessibility issue以及如何修复他。

总结而言，Pro版本在Free版本上弥补了部分无法自动扫描的无障碍问题，按照官网的说法，Free版本一般能扫描出网站50%左右的无障碍问题，通过智能引导测试可以覆盖到80%左右，对于剩下的20%无障碍问题，Pro版本也提供了手动无障碍测试CheckList，帮助测试人员全面检测Web网站是否满足无障碍规则,详细的CheckList如下图所示，这些CheckList可以帮助不熟悉无障碍测试的人员更好的理解如何对一个web网站开展无障碍测试。

上面介绍了axe-devTools，接着来看看WAVE插件使用，WAVE的使用也很简单，在浏览器上按照插件后即可使用，扫描结果如下图所示，因为内部覆盖的规则有所不同，所以针对同一个网站，两个插件扫描出的问题略有不同。实际项目中，建议采用某一个插件，相对来说axe提供的功能更加丰富，首选axe。

除了WAVE，性能检测工具lighthouse也可以检车accessibilty的问题，如下图所示，同理，工具内置的规则不同，检查结果也略有不同，另外，lighthouse也给出了high level的手动checkList。

以上就是对web系统开展无障碍测试的介绍，总结而言，在开展无障碍测试前，需要透彻理解无障碍相关规则，然后选取一款自动扫描工具进行扫描，在修复了扫描后的issue情况下，再参考手动测试CheckList对web系统开展更全面的无障碍测试。