设计师如何做好无障碍测试

 01 

什么是无障碍测试

▼

残障群体在我们的生活中并不多见，但是事实上，他们的数量很庞大，接近人口数量的一半。

以失明群体举例：据世界卫生组织2010的统计数据显示，中国的失明人士共有824.8万，全国此类存在视力障碍的人数量位列世界第一，截止2019年，中国视障人数的数量已经迅速增长到了近1700万人，也就是说，每80个人中，大约就有一名失明人士。

不仅仅是视障， 意外或者遗传疾病导致的身体残疾也不在少数，加上老龄化群体，如果一个网站只考虑为眼明耳聪身体灵活的健康人设计,而忽略了这些残障群体, 这不仅白白流失了大量的残障用户,也不符合包容性设计的理念.

感谢科技的巨大进步，视障人士可以也通过读屏软件“听”世界，九成的视障人士认为网络对他们的价值是巨大的，网络世界的无障碍化的推进势在必行。

但是仍然有一些App做的不够完善，残障人士无法顺利使用，所以推行无障碍测试很有必要, 阅读本文，你可以全面的了解，从设计师的角度，如何通过无障碍测试为残障群体破除网络应用的“拦路虎”。

 02 

检测方式

▼

无障碍测试有两种方式: 人工检测和自动检测。

人工检测，顾名思义，主要通过人力判断应用中存在的无障碍问题，可以解决系统中约70%的问题, 适合判断偏主观的内容,比如替换文字的内容是否得当明确。人工检测可以进行事无巨细的检测,更全面和高质量,但是耗费更多的时间和精力。

自动检测主要是开发人员负责的，检测后台代码的无障碍问题, 能够检测出约30%的问题.自动检测因为凭借一些工具，所以快速、便捷，但是它只能检测特定类型的基本错误, 比如检测非文字类型的内容是否有替代文字, 它适合检测简单、直接、具体的问题, 即非黑即白类型的问题, 而不是需要一些主观判断和斟酌的问题. 自动检测不全面且有遗漏, 所以必须和人工检测相结合。

综上所述，最好的无障碍检测方法是自动检测工具辅助，人工检测为主，二者相结合最妙。下文中只讲述人工如何通过人工检测判断页面的无障碍问题的流程和方法，不涉及自动检测的介绍。

 03 

检测时长

▼

检测所花费的时长,主要有以下两个因素影响:

网站的页面数量庞大，我们该如何选择优先检测哪些页面呢？

为了节约时间,提高效率,我们可以先集中火力解决主要矛盾, 然后再去解决次要矛盾.。优先检测使用频率高，内容集中的网页。比方对于电商平台来说，先检测商品从搜索到购买的一整个购买流程中涉及的界面，尤其是影响支付决策的信息的界面。

而那些层级隐藏的较深，入口很难找到，抑或是极少使用的页面则可以等到优先级高的页面检测结束后，再细看不迟。

尤其对于体量大的网站来说，时间和精力要有主次地分配，大致根据页面信息的承载量、使用频率、关键用户使用路径来给所有页面排优先级,让整个检测流程有条不紊、有的放矢的进行。

 04 

检查清单

▼

4.1 颜色

这是老生常谈的问题了：颜色不能作为传达信息的唯一维度，这是因为视障用户中有一大部分的色盲群体，无法分辨颜色，色盲和正常人看到的世界是很不一样的，举个例子：

如果页面只通过颜色来传达信息，那么对于色盲用户来说，将是一场灾难。信息的多样化传达，才能保证更多的用户获取更加完整的信息，这里只略带过说一下。详见色彩无障碍指南。

AA的标准下，颜色对比度的要求如下：

对于体量较大的网站，推荐采用无障碍颜色矩阵的方法,快速全面地检测网站颜色组合.

具体方法是：将系统中已有的色彩搭配罗列出来，排列组合, 用对比度工具（这个在色彩无障碍指南中有推荐过很多检测工具，这里不再赘述）进行对比度检查, 大多数网站都有自己的品牌色基础色,这样一来,可以将大多数颜色组合的情况过一遍.然后再对少数出现的颜色组合进行逐个检测,这样的好处是仔细全面、不易有遗漏.

下图是一个示范，可以看到用橙色描边的代表一般的元素和大字体是可以使用该颜色组合的，但是普通文本（小于等于14粗体或者18常规体）是不可以使用的；红色描边代表禁止使用此类组合。

4.2 字体

4.2.1 改变字体大小

对于视障用户来说，寻常大小的字体看起来模糊不清，难以辨认，所以页面需要能够使用户在不借助任何辅助技术时，将页面元素放大到200%，而不损失页面中的其他元素，不影响任何功能的使用。这里的内容不仅仅指所有承载文字的元素，包括按钮、表格，图形化的元素如图标、图片也要跟随页面的放大而等比例放大。

下图示范了正确和错误的放大的例子：错误的放大方式比如，只是放大了页面的内容但是超出了页面容器的范围，所以内容展示不完整；只放大了文字但是没有放大图片等等。

但是放大页面后也会带来一些问题，比如当表格的列标题放大200%后，列标题的文字长度超出了表格列的宽度，文字就不得不隐藏一部分，此时省略内容要遵循两条规则：

1）确保让用户意识到该内容被省略，

2）想办法让用户可以知道查看完整内容的方法。

那么，如何才能让用户意识到该处的内容被省略了呢？

1）省略号在末尾。

2）省略号在中间：如果文字的中间有特别重要、需要强调的部分，或者是前后文字是重复的，这样可以作为后面一段话的开端。

那么，用户如何获取完整的内容呢：

1)当鼠标悬停时，将完整内容显示在Tooltip上。

2)当鼠标悬停时，整个内容会像电影院门口的字幕一样，水平滚动。

3)给文字一个可变间距：这个适合文字比较少的网站，可以各个手动调整间距解决这样的问题，如果字数太多，太拥挤就不适合这样解决了.

4)给文字进行换行：这个要在空间足够且不影响整体布局的情况下使用

5)当点击拖拽时，内容会水平扫过。

4.2.2 改变字体距离

为了保证用户的阅读体验，用户需要能够去改变页面的字体间距设置，调整到“行高不小于字体大小的1.5倍，段间距不少于字体大小的2倍，字母间距不少于字体大小的0.12倍，文字间距不少于字体大小的0.16倍”, 调整后不损失页面内容和功能，这里不对页面美观度做要求，只要不影响信息的展示即可。

这一点现在只对基于网页的应用有这样的要求，因为允许用户改变字体间距设置，它的要求是Html语言框架才能做到这一点，所以这一点不适用于本地化的应用，诸如Windows OS,Mac OS, Andriod, iOS。

具体测试方法如下:

代码文本在这里:

{

line-height:1.5 !important;

letter-spacing:0.12em !important;

word-spacing:0.16em !Important;

}

p {

margin-bottom:2em !important;

}

拿维基的页面举个例子，在更改字体的间距前后，内容和功能都保持一致，内容和功能完整可用。

4.3 内容

4.3.1 标签

标签泛指一群相似信息或者单个信息的标题，包括表格行列的标题，页面的标题，段落的标题，输入框的标题等等。界面中出现的所有元素都应该明确它的标签，确保没有不知所以然的游离的落单的信息。标签也包含Tooltip, 图标/字母缩写/快捷键提示应当有tooltip提示。用一句话来总结，标签就是告诉用户该内容是什么或者用来做什么的。

提到标签，我们不得不提到输入框。对于一些有固定格式的输入框，可以在空白输入框中示范填写，比如日期和特定单位的测量数据，指导用户正确输入，减少出错的频率。

标签的位置也很重要，常见的错误案例是，标签作为暗示文字写在空白输入框中，一旦用户输入内容时，标签就消失不可见了，一定要保证标签永远被用户可见。

4.3.2 页面标题

每个页面一定要有页面标题，帮助用户快速浏览定位当前内容。

4.3.3 有意义的非文本内容

人们浏览网站获取信息主要是通过文字，但是有一些信息是通过图片图表这样的非文本内容（不包括装饰性的图片）传达出来，也很重要，屏幕阅读器可以捕捉文字信息，但是却对非文本内容束手无策。Tooltip是一种好办法，但是tooltip一般很短小，适合用来描述图标/缩写/快捷键。

如果想要添加更详实的描述，则需要程序员为非文本内容添加一行不可见的代码 —— Alt/Title代码，正常的页面是看不到这些文字的，只有屏幕阅读器才能捕捉到。

那么具体的，这些描述性的文本内容应当写些什么呢？对于图标或符号来说，可以描述它的含义、类型、功能。

对于图像来说，可以描述该图像的目的、内容. 比如这个图像是数据库中的员工图像，则要在描述文字中引用其所属的模块标签如“肖像图片”。

对于装饰性的图片则只需要描述有意义的内容，下图示范了正确和错误的例子：

非文本内容，不仅包括静态的，也包含像音频视频这样动态的更复杂的内容，我们该如何向用户传达其中包含的内容呢？

对于音频来说，最好在音频附近有同步的音频字幕或者是一个展示音频文字内容的链接，由于用户接受信息的速度有差异，所以对时长超过3秒的音频，用户能够对其进行暂停、关闭，以及提供独立于系统音量的调节音量操作。

对于视频来说，要确保用户能够顺利打开专门为视障群体设计的Closed Caption，Closed是和Open相对立的概念，它代表该种字幕需要被用户激活后才能被用户看到。这种字幕应当不仅仅包含对话的语句，也应当包含说话者的身份、位置、音效、笑声提示等等，为用户提供尽可能多的视频信息。

这里要明确Closed caption和Subtitle的区别。Subtitle就是我们最常见的字幕，只是为了弥补语言不清晰，或者语言不通带来的理解问题，普通用户也都能够看到。

对于直播音频/视频来说，用户能够使用一些基于网页的实时字幕。

有时候为了给文字一些视觉风格，会将文字进行图像化，进行加工再造，可能会降低文字的识别度，这个时候要给他们加上相同的文字描述。

4.3.4 链接

纷繁的网络世界中，用户有时候会在一个又一个链接中感到迷失，因为这些链接很模糊，用户不知道他们将要去到哪个页面，用户在寻找他们想要去往的界面的过程中，往往浪费了很多时间。

所以除了将链接本身的文字写的更清晰易懂之外，给链接一个Tooltip或者加上Alt/Title文本作为解释说明的补充是极好的。

这里有几个点需要注意：

4.3.5 错误提示

当用户输入内容后，系统检测出该处错误，除对系统有危害的内容外，此时系统应当告诉用户错在哪里，以及提供相应的修改意见。

防错机制也很重要，以下三条防错原则至少要做到一条：

大多数人使用鼠标浏览网站，但并不是每个人都以这种方式与浏览器交互。由于视觉障碍、运动障碍或其他身体限制或伤害，许多用户无法或不方便使用鼠标。相反，这些用户使用键盘、可刷新的盲文显示器（如下图）、语音输入或其他输入设备进行导航。

具体的键盘控制的检测方法是这样的，尝试只用键盘完成一整个业务流程，查看完成的过程是否会卡壳或者遇到问题，确保：

4.5 其他

4.5.1 滚动条

当用户放大页面或者改变页面尺寸后，虽然页面信息和功能仍然可以正常展示和使用，但是此时垂直方向上的内容必然变多，此时出现垂直滚动条是很正常的，但是我们应当尽量避免出现水平方向的滚动条，因为这会增加用户阅读页面的难度，大大降低用户浏览页面的效率。

除了一些特定的情况，是可以允许水平滚动条出现的：

4.5.2 图表或者可交互图形

图表、地图、需要用户交互的图形，这些都是残障群体无法查看的，所以需要我们提供描述文字或者数据表格（这对普通用户也是锦上添花的事情），如果实在没办法将这个组件用文字的形式传达给有障碍的用户，那么将这个事件记录在一个专门的文档里。

4.5.3 闪烁频率

光源特定频率的闪烁后可能会诱发光敏性癫痫患者疾病发作，尤其是对于饱和的红色尤其敏感。

所以规定网页内容一秒钟闪烁次数不超过3次。

4.5.4 时间限制

对于不同类型的残障人士，或不同职能的人，处理同样一个任务时，所花费的时间有很大差异，所以系统设定的时间并不适用所有人，用户需要能够有充分的时间去阅读和完成任务。

所以在时长即将结束的时候，系统要在时间结束之前提醒用户“时间即将用完”，用户可以自己:

1）关闭时长限制，或者

2）个性化调整时长（可调节范围最少到默认时长的十倍），

3）给用户至少20秒的时间通过简单的操作（比如按下屏幕上任何一个按钮）即可延长时间一段时间（至少可有10次机会）

但是有一些活动是例外的，不需要设置时长限制：

1）时长大于20个小时的活动，因为20个小时内人们不可能一直保持醒着的状态，

2）时长限制是现场活动的一部分，比如说拍卖会现场的商品拍卖时间，

3）某个活动中的时长限制是基础必要的存在，如果改变这个时长限制将会使这个活动失去意义，比如说玩游戏。

4.6 一致性与多样性

一致性是重中之重，它能够降低用户的学习成本，提高用户的使用效率，大大降低出错率。一致性的字面意义是重复出现的相同UI元素应当有相同的命名和描述，更深层的意义是逻辑上的一致性。

在保证系统一致性的同时，提供多样性选择也不可或缺，一致性和多样性造就更包容的设计和更好的用户体验。

4.6.1 表述方式的一致性

比方说一个链接的说明文字是“跳转到某某页面”，这个表述的逻辑是动词“跳转到”+ 目标页面的名称“某某页面”，那么在所有链接的说明文字中，都应该是这样的表述结构，而不是“弹出新标签页某某页面”等等不同的表述方式。

4.6.2 导航区域的一致性

导航对于用户来说就像是指南针，导航区域在应用中会频繁重复，除非是用户自己更改了设置，否则一定要保证，既是在不同的屏幕和页面上，导航区域也是一致的。

4.6.3 多样性到达页面

应用提供多种途径，让用户找到一个具体的页面，有但不局限于：

1）搜索框搜索页面的关键词

2）应用本身的页面导航区域如菜单

3）页面地图：有的应用会将应用中的页面集合形成纵览清单的方式

4.6.4 提供多种验证码方式

一些花里胡哨的验证码(CAPTCHA,Completely Automated Public Turing test to tell Computers and Humans Apart), 对于视障人士来说，并不友好，因为屏幕阅读器是无法识别图形验证码中的文本信息，即使是视力尚可的用户辨认起来也颇费力气，更何况是视障严重的用户呢。

如果连最开始的注册流程都难以顺利进行的话，即使其他页面的无障碍做的非常好也是无济于事的。所以我们除了图形验证码之外，还应该提供多样化的验证方式让用户选择，如：手机短信验证码、语音验证码等。

 05 

结语

▼

残障群体对于这个世界的大多数来说，属于少数人，但谁又能保证自己不会成为某种分类中的少数呢？

科技不是冷冰冰的，而应当与社会产生连接，为人们播撒善意，我们通过无障碍测试为残障群体扫除上网的障碍，不仅仅是造福于少数群体，也是让整个社会变得更加包容和美好。

参考网站:

WCAG2.1: https://www.w3.org/TR/2018/REC-WCAG21-20180605/