无障碍访问我们可以做些什么

其实我不是来讲故事的

严格意义上来说，我是一名前端开发，清楚地记得我参与过的项目曾花费大量的人力和时间为我们网站的 UI 进行重新设计，尽可能多地吸引用户眼球，也曾花费大量的时间优化网站的性能，想方设法地提高首屏加载速度，追求极致的用户体验，但好像一直都差了点什么......

项目上的原因，让我有机会去开始关注这个从未关注过的问题，之后的学习和应用，慢慢发现无障碍访问并没有想象中那么难，但是缺少关注的人是真的，或者很多人和我一样，差一个不经意的关注和一个认识它的机会。

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

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

起床的第一眼就可以看到阳光，大口大口地呼吸新鲜空气，然后背上书包，踏上单车，去学校，去上班，去见自己喜欢的人，去和每一个朋友微笑，这些看起来简单又平凡的事情，却是很多人日思夜想却永远也享受不到的。

在我惊叹于一个个无比漂亮的界面设计的时候，好像从未想到过这个世界很多人根本就看不到东西，在我沉浸在实现了视频嵌入功能的喜悦之中的时候，好像从未想过这个世界有很多人根本连声音都听不到。

我曾经完全不敢相信双目失明的人可以和健全人一样使用手机和电脑，直到有一天我看到了很多知乎的优秀回答来自于世界不同角落的盲人，我曾经完全不敢相信身体有缺陷的人可以和正常人一样获得工作，直到有一天我知道了盲人编程和聋哑程序员。

其实世界很大，大到我们根本无法用语言来描述每一个存在着的事物。

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

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

他们真的是我们需要考虑的用户吗？我觉得没有理由不是，如果说非要找一个理由，我猜或许是因为被我们的潜意识选择了遗忘吧。**

来自游戏截图《见》

所以无障碍是什么

相比于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.

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

你可能见过四面都是镜子的电梯，它其实是为了增加空间感，让人们觉得不太压抑，可以在等电梯的时候可以整理自己的衣物或者照照镜子，不会觉得等电梯的时候无聊时间长。

你可能见过马路边很多台阶都会有一段会做成坡度的，据我所知它设计的初衷是为了方便盲人的轮椅上下台阶，但是实际上它对自行车和婴儿推车也方便了许多。

你可能见过很多电梯的按钮在楼层的下面都刻有盲文，很多地铁站都设有无障碍通道，无障碍卫生间等等。

有些眼睛看不太清楚的人会使用屏幕放大镜来阅读文字，有些什么都看不见的人会使用盲文显示器来帮助阅读文字，有些色盲患者会使用一些高对比模式来让自己更好地阅读，一些听力不太好的人，在看视频的时候会选择带有字幕的视频。

其实只要你用心去发现，这些都与无障碍这个字眼有关，如果我们做的足够好，他们完全可以像正常人一样生活，只是可能换了一种方式而已。

凡事都少不了标准

WCAG 是W3C 发布的一套网络内容可访问性指南，它是目前网络无障碍的国际标准，合规等级分为三级（A、AA 和 AAA），目前是2.0 版本。

它提倡的四大原则：

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

尽管 WCAG 提供了无障碍内容的全面概览，但规范终究是规范，有时候还是会让人觉得有点不知所措，所以 WebAIM（网络无障碍功能思维）小组将 WCAG 指南提炼成了一份检查清单，专以网络内容为目标，这样我们就更容易知道我们网站存在些什么问题了。

相关无障碍法

W3C 也提供了各个国家的相关 无障碍法，有若干国家在其网络无障碍功能法律要求中明令，必须使用国际标准指南。

澳大利亚政府的“网络可访问性国内过渡战略”（NTS）规定，所有政府网站及其内容必须在 2012 年 12 月 31 日以前达到 WCAG 2.0 的 A 级合规要求，并在 2014 年 12 月 31 日之前达到 AA 级合规要求。

了解过国内的一些资料，虽然到现在很多软件已经在慢慢变好，但是大部分的网站无障碍访问依然不是很乐观，中山大学工学院教授富明慧教授曾经说过一句话：

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

我们可以做些什么

1. HTML 语义化

• 标题，段落，列表等内容的保持良好的结构
  正确地使用各个语义化的标签，不仅是代码质量的提高，对阅读代码的人，也会有极大的帮助，同样对于开发成本，网站的SEO来说都是有好处的。
  对于 Accessibility 来说，良好的标题，段落，列表结构也会提高辅助设备对用户的良好体验，比如屏幕阅读器在阅读到相对于的语义化标签的时候，是会自动地将对于标签读给用户听的。
• 尽量使用语义化的标签
  浏览器的调试工具里面有个叫 Accessibility tree 的东西，浏览器实际呈现给屏幕阅读器的就是这个树的结构 (浏览器获取 DOM 树，并将其修改成适用于辅助技术的形式) 将DOM 树变成无障碍树，所以良好的使用语义化标签，能让辅助设备更合理地将你网站的内容转化成 Accessibility tree，从而解读给用户。
  

所以确保页面中的重要元素具有正确的无障碍角色、状态和属性并确保指定无障碍名称和说明，浏览器便可让辅助技术获取该信息以打造自定义体验，这一点很重要。

• 为所有非文本内容提供文本替代项
  图片是大多数网页的重要组成部分，可想而知，也是对弱视用户造成阻碍的一个特定因素，这时候添加文本替代项是非常重要的，所有图像都应有 alt 属性，但它们无需都包含文本。 重要的图像应使用描述性替代文本简洁地说明图像内容，而装饰性图像应使用空的 alt 属性。
• DOM 顺序和 Tab 键顺序保持一致
  一般我们设计的时候，往往考虑的都是视觉可见得用户，其实对于只能使用屏幕阅读器浏览网站的用户，这时候如果我们过多地使用一些样式让视觉显示的 DOM 结构和 Tab 键顺序不一致的话，就会造成用户的疑惑。

2. 关于 Focus

大家应该都使用过 Tab/ Shift Tab 键和网页进行交互吧，这些快捷的功能不仅提高了我们一般人的效率，其实对不能使用鼠标的用户来说也是不可或缺的。

不同的浏览器会有不同的 Focus 状态的样式，Chrome 通常使用蓝色边框突出显示聚焦的元素，而 Firefox 则是使用虚线边框，也许你曾经见过，但你可能又会发现很多网站是没有这些交互的，也许 这就是在网页设计以及实现的时候禁用了这写功能或者说没有使用合理的标签。

浏览器默认的 outline 样式

Web AIM 检查清单才会在其第 2.1.1 节中指出，所有页面功能应该都能使用键盘来执行

这个网站 对 outline 做出了很好的解释，其实很多时候，产品经理或者设计师会觉的它很丑，但其实就这样一行这样看起来 “完美”地解决掉丑陋的 ontline 的代码会将多少用户拒之门外。

HTML 默认的 focusable 元素，是自动插入到 Tab 键顺序中，并且内置了键盘事件处理，默认支持 keyboard 功能，基本的都可以在 这里 找到。

关于 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% 用户在访问网站的时候无法获得我们预想的体验。

WCAG 2.0 对页面上文字的对比度有一个最低的要求 4.5 : 1，所以保持合理的对比度，同样重要，如果你够细心，Chrome的选色器也会给出你的对比度是否符合要求。

关于测试

如果你愿意的话，你可以用几分钟的时间打开 Audits 找到你网站存在的所有无障碍问题。

然后会看到你网站的分数和所有的对需要修复的问题的建议

有着同样效果的 Chrome 插件

• ax 可以测试网站的 Accessibility 现状，并指出哪里需要改进以及建议的方法
• WAVE 作用同上，只是提示方式有些区别
• pa11y 自动化的测试工具，可以集成 CI。

写在最后

其实每个角落都有人在以不同的方式创造着奇迹，我想，我们可以做的更好，我想，总有变好的那一天。

他们可以用眼上网
苹果公司无障碍主题视频
帮助盲人探索世界

他们怀着希望期待着的明天，不会永远与我们无关