无障碍开发系列之隐藏内容访问

欢迎访文我的博客YangChen’s Blog

前一阵子一直在开发一个无障碍项目，到现在算是告一段落了，利用这点时间打算整理下无障碍开发上的一些关键技术。这次开发任务还是蛮有挑战的，网上也没有找到什么系统性的学习资料，踩了不少坑，回炉也改了不少代码，所以对于这个项目的技术总结还是十分重要的。

无障碍开发概念

什么是无障碍开发

要做无障碍开发，知道什么是无障碍这个概念是十分重要的。无障碍在词典中的字面意思是

在发展过程中没有阻碍，活动能够顺利进行

对于前端的无障碍开发，我的概念是：能够让色弱、色盲、盲人等一些视觉有障碍的朋友，顺利、流畅、准确、一致的获得网页上的信息，并能进行相应的页面的操作。

概念理解起来如果很抽象的话，可以下一个读屏软件例如NVDA、争渡等，然后随便打开一个页面，闭着眼睛体验一样，你就会发现十分令人抓狂，无法注册、无法订票、甚至最恶劣的情况是完全不知道这个页面提供了什么信息，就是给你读图片，编辑框等，然而你根本就不知道是什么图片，编辑框是写什么信息的。

无障碍开发与正常开发有什么不同？

这个问题很关键，先从几个问题开始入手。

1. 对于一些模拟标签，例如用a标签写button，如何让读屏器读出这是button而不是链接。
2. 如何让盲人朋友知道焦点所在的区域是导航栏还是表单区域。
3. 弹出一个对话框时，如何让盲人朋友知道这是一个对话框，并且点击后焦点能够返回到出发对话框的位置。
4. 点击一个区域使得另一个区域发生变化时，如何让盲人朋友知道。
5. 对于像图片这样的视觉信息，如何能够让盲人朋友获得里面的信息。

所以，无障碍开发与正常开发有什么不同。概括总结下就是，正常发开中我们在乎的视觉信息的传递，页面上显示的bug这个显然是不能接受。而无障碍开发中，我们不但要兼顾上听觉的信息传递，使读屏器读出的信息与视觉信息一致，并且还要支持流畅的键盘操作，因为鼠标操作显示不适合盲人朋友的阅读。

隐藏内容的访问

什么是隐藏内容的访问?

听起来很奇怪，隐藏的内容为什么要访问呢？谁访问？这个就是让读屏器访问的，对于无障碍导航，或者需要让读屏器读出来做补充的，而且内容要隐藏的，就需要用到这个技术。

举个例子来说，打开bootstrap，然后按下tab键就能看到这个无障碍导航

这个无障碍导航在正常情况下是看不见的，只有获得焦点时才能访问。可能有人会有疑惑，用display:none不就好了，当然不行啊，display:none里的元素是不能被读屏器访问的。

无障碍导航的隐藏访问

隐藏访问的方式有很多，但是有些有很多坑，这里翻译下Hiding Content for Accessibility这