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

其实我不是来讲故事的

严格意义上来说，我是一名前端开发，清楚地记得我参与过的项目曾花费大量的人力和时间为网站的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.

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

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

凡事都少不了标准

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

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

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

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

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

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

至少我们可以做到这些

标题，段落，列表等内容的保持良好的结构
对于Accessibility来说，良好的标题段落和列表结构会提高辅助设备对网站内容的识别度，提高用户的体验，比如屏幕阅读器在阅读到结构相对良好的标签的时候，会用帮助户更容易地理解我们网站的内容。
尽可能地使用语义化标签
正确地使用各个语义化的标签，不仅是代码质量的提高，对阅读代码的人也会有极大的帮助，同样对于开发成本，网站的SEO来说都是有好处的。浏览器的调试工具里面有个叫Accessibility tree的东西，浏览器会获取DOM树，然后将其修改成适用于辅助技术的形式(无障碍树)，所以良好的使用语义化标签，能让辅助设备更合理地将我们网站的内容转化成Accessibility tree，从而解读给用户，确保页面中的重要的元素有正确的无障碍角色、状态和属性，这一点很重要。
为所有非文本内容提供文本替代项
图片是大多数网页的重要组成部分，但其实也是对弱视用户造成阻碍的一个特定因素，这时候添加文本替代项是非常必要的，所有图像都应有alt属性，但它们无需都包含文本。重要的图片应使用描述性替代文本简洁地说明图像内容，而装饰性类的图片应该使用空的alt属性，而直接删掉看起来没用的alt。
DOM 顺序和 Tab 键顺序保持一致
一般我们设计的时候，往往考虑的都是以视觉为主的，其实对于只能使用屏幕阅读器浏览网站的用户来说，如果我们过多地使用一些样式让视觉显示的DOM结构和Tab键顺序不一致的话，就会造成用户的疑惑，比如样式中使用了float之后，记得用tabindex调整Tab键的顺序，使其和DOM顺序一致。

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

Accessibility-Tree

有些做法其实是不友好的

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

outline

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

outlinenone

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

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

3. 请使用 WAI-ARIA

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

4. 网页的对比度

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