欢迎访文我的博客YangChen’s Blog
前一阵子一直在开发一个无障碍项目,到现在算是告一段落了,利用这点时间打算整理下无障碍开发上的一些关键技术。这次开发任务还是蛮有挑战的,网上也没有找到什么系统性的学习资料,踩了不少坑,回炉也改了不少代码,所以对于这个项目的技术总结还是十分重要的。
无障碍开发概念
什么是无障碍开发
要做无障碍开发,知道什么是无障碍这个概念是十分重要的。无障碍在词典中的字面意思是
在发展过程中没有阻碍,活动能够顺利进行
对于前端的无障碍开发,我的概念是:能够让色弱、色盲、盲人等一些视觉有障碍的朋友,顺利、流畅、准确、一致的获得网页上的信息,并能进行相应的页面的操作。
概念理解起来如果很抽象的话,可以下一个读屏软件例如NVDA、争渡等,然后随便打开一个页面,闭着眼睛体验一样,你就会发现十分令人抓狂,无法注册、无法订票、甚至最恶劣的情况是完全不知道这个页面提供了什么信息,就是给你读图片,编辑框等,然而你根本就不知道是什么图片,编辑框是写什么信息的。
无障碍开发与正常开发有什么不同?
这个问题很关键,先从几个问题开始入手。
- 对于一些模拟标签,例如用a标签写button,如何让读屏器读出这是button而不是链接。
- 如何让盲人朋友知道焦点所在的区域是导航栏还是表单区域。
- 弹出一个对话框时,如何让盲人朋友知道这是一个对话框,并且点击后焦点能够返回到出发对话框的位置。
- 点击一个区域使得另一个区域发生变化时,如何让盲人朋友知道。
- 对于像图片这样的视觉信息,如何能够让盲人朋友获得里面的信息。
所以,无障碍开发与正常开发有什么不同。概括总结下就是,正常发开中我们在乎的视觉信息的传递,页面上显示的bug这个显然是不能接受。而无障碍开发中,我们不但要兼顾上听觉的信息传递,使读屏器读出的信息与视觉信息一致,并且还要支持流畅的键盘操作,因为鼠标操作显示不适合盲人朋友的阅读。
隐藏内容的访问
什么是隐藏内容的访问?
听起来很奇怪,隐藏的内容为什么要访问呢?谁访问?这个就是让读屏器访问的,对于无障碍导航,或者需要让读屏器读出来做补充的,而且内容要隐藏的,就需要用到这个技术。
举个例子来说,打开bootstrap,然后按下tab键就能看到这个无障碍导航
这个无障碍导航在正常情况下是看不见的,只有获得焦点时才能访问。可能有人会有疑惑,用display:none
不就好了,当然不行啊,display:none
里的元素是不能被读屏器访问的。
无障碍导航的隐藏访问
隐藏访问的方式有很多,但是有些有很多坑,这里翻译下Hiding Content for Accessibility这