关于信息无障碍我们能做些什么

2019 年 10 月 28 日
筆記

其实我不是来讲故事的

严格意义上来说，我是一名前端开发，清楚地记得我参与过的项目曾花费大量的人力和时间对网站的UI进行重新改版设计，尽可能多地吸引用户，也曾花费大量人力和时间优化网站的性能，想方设法地提高首屏加载速度，追求极致的性能体验。

但印象中，却很少听说有团队会专门花精力去优化网站的无障碍访问的问题。

项目上的原因，让我有机会开始关注这个从来没有和别人聊过的话题，有一天，客户告诉我们说想优化网站的Accessibility 问题，想让整个网站更平易近人一些，清楚的记得那时候整个团队里几乎没有人有过相关的开发和测试经验，说实话还挺惭愧的。接着就是一系列的学习，开发，实践，踩坑，再学习，再实践，再踩坑了……其实后来慢慢地发现，这一系列的东西并没有想象中难，缺少大多数人的关注是毋庸置疑的，尤其是在国内。所以我想，或许很多人和我一样，只是差一个不经意的关心和一个认识它的开始。哦对了，文章字数有点多，但其实我不是来讲故事的。

“可能很多人对无障碍最大的误区是，把它当做成了产品的情怀功能，而非基础功能或者Bug去对待。”

在谈论用户的时候，我们是不是忘了些什么

起床的第一眼就可以看到阳光，大口大口地呼吸新鲜空气，背上书包，踏上单车，去上学，去工作，去见自己喜欢的人，去做自己喜欢的事，对路过的每一个朋友微笑，和每一个认识的人打招呼……不知道你有没有那么一瞬间曾经认真地想过这个问题，这些看起来平凡到似乎每天都会发生的事情，却是很多人日思夜想却永远也体会不到的。

“当我哭泣我没有鞋子穿的时候，我却发现有人没有脚。”

在我惊叹于一个个无与伦比的设计的时候，好像从未想到过这个世界有很多的人却什么都看不到，在我沉浸在实现了视频嵌入功能的喜悦中的时候，好像从未想到过这个世界有很多的人一点声音也听不到。我曾经完全不敢相信双目失明的人可以和正常人一样使用手机和电脑，和正常人一样聊天打字，直到有一天我发现了很多知乎优秀的回答是来自世界不同角落的盲人们，我曾经完全不敢相信身体有缺陷的甚至可能都没有机会和我们一样用键盘打字的人可以和正常人一样获得平等的工作机会…… 直到有一天我了解了盲人编程和聋哑程序员还有视障工程师。

有时候真的觉得世界好大，大到我们根本无法用语言来恰当地描述每一个存在着的事物。

据公开数据统计，色盲患者中，平均12名男性中就有一例，200名女性中就有一例，他们可能难以区分红色和绿色，或者黄色和蓝色。弱视患者30名人群中就有一例，他们没有任何的角膜，尽管能看到东西的大致轮廓，却难以阅读印刷文字，在法律上会被视为盲人。

中国有2亿多的障碍群体，其中包括 1700 万视障者，2000 万听力障碍者，7000 万读写障碍者，1.5 亿 65 岁以上的老年人等等，加上其他各种类型障碍人群，这些障碍人士加起来占中国人口总数 20% 以上。

我已经记不清楚到底有多少个瞬间提到过用户这个字眼了，但是他们是我们的用户吗？真的是我们需要考虑的用户吗？我觉得没有任何理由可以回答不是，如果说非要找一个理由，那应该就是一些连我们自己都没有意识到的意识被我们的潜意识选择了遗忘吧。

所以无障碍是什么

你可能见过四面都是镜子的电梯，它的设计其实是为了增加空间感，让人们觉得不那么压抑，在等电梯的时候也可以整理整理自己的衣物，照照镜子，不会让人觉得等电梯的时候无聊；你可能见过马路边很多台阶有一段会做成坡度的，据我所知它设计的初衷是为了方便轮椅上下台阶，但是实际上大家应该都有发现，它也方便了自行车和婴儿推车；你可能见过很多电梯的按钮都刻有盲文，很多地铁站都设有无障碍通道，无障碍卫生间等等，这些都与无障碍有关。

信息无障碍，英文来自Accessibility，但是这篇文章我们主要聊一聊Web的无障碍问题，相比于W3C的定义，其实我更喜欢维基百科给出的解释。

“ Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.”

Web accessibility 指的是所有的用户在任何情况下都能平等地、方便地、无障碍地获取信息、使用功能，无论是健全人还是残疾人，无论是青年人还是老年人。

有些看不太清楚字的人会使用屏幕放大器来阅读文字，有些什么都看不见的人会使用盲文显示器来阅读文字，有些色盲患者会使用一些高对比模式来获得更好地体验，一些听力不太好的人在看视频的时候会选择带有字幕的视频……如果你正在使用Mac，可以试着按下Command+F5，然后闭上眼睛，用另一种方式去感受你曾经可以看到的东西。其实只要你用心去发现，这些都在诠释着无障碍这个字眼。

凡事总得有标准

WCAG是W3C发布的一套网络内容可访问性指南，它是目前网络无障碍的国际标准，合规等级分为三级（A、AA 和 AAA）。总的来说，全篇围绕了四个原则：

可感知 用户能否正确地感知到产品的内容？如果说我们的网站只提供凭借一种感官（例如视觉）才能让用户感知到内容，其实无形中就失去了很多用户。
可操作 用户能否正常地使用每一个组件的功能？比如我们经常用到的下拉菜单，我见过很多网站只设计了hover上去的时候展开菜单的效果，却没有实现点击状态下的展开，有没有想过如果我们的用户群体根本就没有能力使用鼠标，是不是也就意味着不能使用我们的网站了呢？
可理解 用户是否能很好地理解我们的内容？比如我们加了一个看着很时尚的小 Logo 来表示设置功能，但并没有为读屏软件提供相关的内容解释，如果我们的用户完全看不到东西，是不是也就意味着根本不能理解我们的网站有什么内容，也就不能再继续交互下去了？
强健性 我们网站或者产品的内容是否能被多种User Agent使用？使用屏幕阅读器的用户可以正常读出来我们想表达的内容吗？使用IE的用户是不是压根就无法访问我们的网站呢？

听着是不是还是有些不知所措，没关系，WebAIM（网络无障碍功能思维小组）将WCAG指南提炼成了一份详细的检查清单，这样我们就更容易知道我们网站存在些什么问题了。

W3C也提供了各个国家的相关无障碍法，有若干国家在其网络无障碍功能法律要求中明令，必须使用国际标准指南，了解过国内的一些资料，虽然到现在已经有一些 App 优化了很多的无障碍功能，但是大部分的网站无障碍访问依然不是很乐观。中山大学工学院教授富明慧教授曾经说过一句话：

“目前我国99%的网站，由于没有实现无障碍，盲人难以正常浏览访问网站。”省盲协主席” 富明慧本身就是一名盲人，他失明后发明了半方盲文输入法，他还说，加快网站无障碍改造，政府部门网站应该先行一步。”

很多发达国家，比如美国、欧洲、日本等国家都会针对 a11y 立法，不符合 a11y 的软件或者程序很多都不在政府机关等的采购范围内。澳大利亚政府的“网络可访问性国内过渡战略”（NTS）规定，所有政府网站及其内容必须在 2012年12月31日以前达到 WCAG 2.0 的A级合规要求，并在2014年12月31日之前达到 AA 级合规要求。

至少我们可以做到这些

所以作为一名开发，尤其是前端开发，我们可以做些什么呢？下面我将以ThoughtWorks旧版官官网为例阐述一些想法（目前网站已经更新，大部分 Accessibility 问题已被修复）：

1. 标题，段落，列表等内容的保持良好的结构

对于Accessibility来说，良好的标题段落和列表结构会提高辅助读屏设备对网站内容的识别度，提高用户的体验，比如屏幕阅读器在阅读到结构相对良好的标签的时候，会帮助用户更容易地理解我们网站的内容。

2. 尽可能地使用语义化标签

正确地使用各个语义化的标签，不仅是代码质量的提高，对阅读代码的人也会有极大的帮助，同样对于开发成本、网站的SEO来说都是有好处的。浏览器的调试工具里面有个叫Accessibility tree的东西，浏览器会获取DOM树，然后将其修改成适用于辅助技术的形式(无障碍树)，所以良好的使用语义化标签，能让辅助设备更合理地将我们网站的内容转化成Accessibility tree，从而解读给用户，确保页面中的重要的元素有正确的无障碍角色、状态和属性。

3. 为所有非文本内容提供文本替代项

图片是大多数网页的重要组成部分，但其实也是对弱视用户造成阻碍的一个特定因素，这时候添加文本替代项是非常必要的，所有图像都应有alt属性，重要的图片应使用描述性替代文本简洁地说明图像内容，而装饰性类的图片应该使用空的alt属性，而直接删掉看起来没用的alt。

4. DOM 顺序和 Tab 键顺序保持一致

一般我们设计的时候，往往考虑的都是以视觉为主的，其实对于只能使用屏幕阅读器浏览网站的用户来说，如果我们过多地使用一些样式让视觉显示的DOM结构和Tab键顺序不一致的话，就会造成用户的疑惑，比如样式中使用了float之后，记得用tabindex调整Tab键的顺序，使其和DOM顺序一致。

“优秀的无障碍设计，不仅能让身体有缺陷的用户正常地与产品交互，也会为普通人提供更好的使用体验，实际不需要开发者编写很繁琐的代码，每增加一点支持，网站就能更加的平易近人。”

有些做法其实是不友好的

打开一个网页，用Tab/Shift+Tab进行跳转，不管是误触，还是故意为之，大家应该都多多少少会看到这样一个样式，也许你曾经见过，也许你可能发现同样的一个链接在有的网站却是没有这样的样式和交互的，其实它是浏览器默认的Focus的样式，代表着这个元素默认是focusable的HTML默认的focusable元素，会自动插入到Tab键顺序中，并且内置了键盘事件处理，默认支持keyboard功能，基本的都可以在这个链接里找到，不同的浏览器会有不同的的样式Chrome通常使用蓝色边框突出显示聚焦的元素，而 Firefox则是使用虚线边框。

还记得你的处理方式吗？我清楚地记得，在得知我们设计师曾经说这个样式很丑，提议把它去掉的时候,a { outline: none; }一行这样看起来很完美的代码就解决了问题，但其实我们并不知道，就这样一行看起来天然无公害的代码，让网站成为了多少人的地狱 outlinenone 对outline做出了很好的解释，Web AIM 检查清单也在其第 2.1.1 节中指出，所有页面功能应该都能使用键盘来执行。

所以关于focus我们能做的有很多

不要删掉原生支持的 outline 样式，除非你有更好看的样式替代它
尽量使用原生支持的可聚焦的元素
如果有复杂的UI, 需要使用非语义化的标签来实现交互组件的时候，请为它加上tabindex和必要时的一些事件
可以自己写一些 JavaScript 或用一些库来区分键盘和鼠标或者触摸事件，实现不同场景下的outline样式，比如只想在使用键盘的时候有outline，使用鼠标或者触摸板的时候去outline，我觉得这是相对合理的设计，可以参考what-input的实现。

请使用 WAI-ARIA

做到了以上几点，其实大多数时候，我们需要满足复杂的业务逻辑而使用一些非语义化的标签，完全没有问题，但是请为它加上WAI-ARIA相关属性, 它可以修改现有元素的语义，也可以向不存在原生语义的元素添加语义，通过增加浏览器和辅助技术可以识别的进一步语义来让用户知道正在发生的事情，它提供了一系列可以使用的HTML属性来达到该目的，常用的有role， aria-label，aria-labellby，aria-owns，aria-hidden，学会很好的使用它们，或许给你带来一些特别的收获。

“看的我眼睛都快瞎了”

有时候你会发现看电脑的时候眼睛会很不舒服，可能不仅是因为看时间长了，也很有可能是你看的东西颜色对比度有问题了，下图红框的部分从下到上，我们能看到对比度越来越低，识别度也越来越低，如果我们设计开发网站过程中使用了不是很高的对比度，对于一些诵读困难症患者来说，他们会感觉文字在旋转、模糊，有人统计过，大约 5% 用户在访问网站的时候无法获得我们预想的体验。