如何进行无障碍测试

什么是无障碍测试：        

        视力受损、色盲、听力受损、精细动作失能的人、以及有认知障碍和许多其他残疾的人也希望可以使用设备来处理他们日常生活中的各种事务。例如：每个输入框和按钮有特定的标签让阅读软件可以阅读这些UI组件，这样可以方便盲人使用；UI界面上的颜色和对比度需要足够明显，这样方便色弱的人使用等。如果我们在开发应用时考虑无障碍功能，那么便可以改善用户体验。

        Accessibility test（无障碍测试）是一种测试方法，目的是在评估软件、网站或其他数字产品的可访问性，在完成无障碍测试的开发工作后，我们可以执行自动或手动的测试，以确保我们的系统能够被身体残障或其他特殊需求的用户使用。

如何进行无障碍测试：

        不同的国家和组织制定了大量不同的Web Accessibility标准，在进行无障碍测试之前，我们需要了解一些业界通用的规范文档，了解什么是2A标准，以及无障碍模式下推荐的组件交互方式是什么，例如：

参考文档：

互联网无障碍规范 —— WCAG AA规范

包容性设计原则手册 —— https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE4XeV2

        当我们对一个web系统开展无障碍测试时，最简单的方法是利用扫描工具全面的扫描我们的网页，在了解无障碍标准的基础上，先借助一些工具进行自动扫描，修复扫描出来的问题，之后再配合一些辅助工具开展全面的手动测试。

使用分析工具进行测试：

        目前业界有非常多的无障碍扫描工具，这些工具基本包含了支持WCAG1.0，2.0和2.1，以及各个不同国家的标准，无障碍功能扫描工具会帮助我们扫描屏幕，筛选出不符合无障碍标准的组件或配置，并提出关于如何改进查看内容标签、可点击项、对比度等内容的建议。目前最为常用且免费的工具是WAVE和Lighthouse。

WAVE：

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

 Lighthouse：

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

        工具内置的规则不同，检查结果也略有不同，我们并不需要修复工具扫描出的所有问题，结合修复建议和我们的需求酌情修改即可，我们的目标是尽可能的从设计开始就考虑到无障碍的需求并持续为之努力。

手动测试：

        在自动扫描之后，我们还要进行一定的手动测试，手动测试的目的是像真实的用户一样体验我们的产品。模拟特殊需求的人士使用系统，从可用性，易用性角度进行进一步探索，找到扫描的漏网之鱼，进一步保障无障碍功能满足用户需求。

        手动测试一般从两个方向入手，一个是模拟视障人士，在读屏工具的帮助下使用系统，另一种是模拟无法进行精细化操作的人士，通过键盘操作与系统进行交

1.模拟视障人士，使用读屏工具能够正常浏览网页。

•  借助读屏工具，如旁白(mac)或其他读屏工具（讲述人 windows）浏览页面；
•  检查页面上的图像，标题，文本，链接等，是否能被选中，标签内容朗读是否恰当，内容是否正确
•  使用旁白工具与元素进行交互，例如进入子一级元素，单选，多选等，检查操作是否被执行，执行结果能否被用户获知。

2.模拟无法进行精细化操作的老年人，使用键盘浏览页面，和页面元素进行交互。

• 按上下左右键在组件之间跳转，使用键盘展开，关闭菜单，选中菜单中的组件；
• 使用键盘交互选中组件，输入文本，跳转链接，完成单选多选，打开关闭弹窗等操作；
• 在交互过程中检查页面焦点的拆分是否合理，焦点扫动浏览顺序是否合理（一般从上到下，从左到右），焦点间的跳转是否正常，焦点的访问范围是否合理等；

常见无障碍缺陷类型：

缺陷名称	用户影响	检测方法	通过标准
无焦点	只有具有焦点的元素才可被读屏用户访问和交互，无焦点的元素将无法被用户操作和感知。	使用读屏手势访问非装饰性元素,观察该元素是否可被聚焦。	元素存在焦点，读屏手势可准确聚焦。
无标签	用户无法获知元素的含义及作用。	焦点聚焦至检测元素，观察屏幕阅读器朗读内容。	控件、图片等界面元素具有恰当的标签,标签内容能够准确、简洁地描述元素的功能或目的。
类型缺失	用户无法获知元素类型,无法判断如何操作及使用此元素。	焦点聚焦至检测元素。观察屏幕阅读器控件类型提示是否正确。	元素包含正确的类型信息。
状态缺失	用户无法获知元素当前所处状态,无法根据元素当前状态确定操作。	触发元素的不同状态,观察屏幕阅读器在每种状态下是否正确提示状态相关信息。	元素在各个状态下类型信息均设置正确。
操作无响应	用户无法与元素进行交互。	聚焦控件,根据控件的类型判断交互方式,用屏幕阅读器操作手势交互,观察手势操作是否生效。	控件类型设置合理,操作方式与控件惯常交互一致,读屏模式下,手势操作有效。