D2前端技术论坛之网页无障碍学习笔记

周末有幸参加了淘宝技术嘉年华，这一界的D2前端技术论坛增加了信息无障碍的一些讲坐，现场也提供了无障碍浏览体验区供大家体验，可见中国的信息无障碍已经受到重视。下面是在会上听到的一些心得记录下来：

 

中国的盲人数量是500多万，如果建成一个国家，人口总数是世界上200多个国家中的110名左右。

盲人操作电脑大部分时间是用全键盘操作，而且最先开始都是用tab键来切换顺序，网页中的链接不能太多，否则想要找到自己想去的链接很费劲。

要让元素支持tab键，可以加上tabIndex。

要让表单元素被读屏软件读到，可以使用以下方法：lable for 、value。比如你使用了:请输入姓名：<input type="text" id="name">，这样子写，盲人朋友根本就不知道要输入什么，请使用 <label for="name">请输入姓名</label>：<input type="text" id="name">

不要使用<img scr="xxx.jpg" onsubmit="submit()" />这种方式来进行表单提交，如果一定要使用，请加上tabindex="0"让其能支持读屏软件。 

不要使用诸如：“红色部分必须填写”之类的表单提示，因为盲人或色盲者看不见。

在页面交互时弹出了框，要让框得到焦点，否则盲人不知道有提示框弹出。可按ESC关闭弹窗，关闭后焦点回到触发弹窗的元素上。

不要使用onfocus="this.blur()"取消a标签的虚线框，盲人按tab键时没法操作,可以使用CSS中的outline="none"和IE中的hidefocus属性来实现。

使用onmousedown="init()"此类脚本操作时请考虑到盲人朋友，尽量也支持键盘，比如加上 onfocus="init()" 或者 onkeydown="init()" 。

在某些重要和常用的交互时可以使用accesskey属性来支持快捷键操作。

图片要加上alt属性，好让盲人朋友知道这是个什么图片。

保持HTML的顺序，把用户最想读到的放在前面。比如新浪微博，主体内容的HTML就在左侧栏HTML之后，按很多次tab才读到微博列表，这就是不好的例子。

网页做好以后可使用全键盘进行测试，再加上firefox的Accessibility Features扩展检测可很好的让网页支持无障碍浏览。

 

总结：暂时就记起这么多，上面其实都是在HTML 4.0时代就有的功能，我们在开发网页时，只要多留一点意识就可以让盲人朋友们很好的浏览网页，可是我们都没有真正的用心去做。从现在起，我决定，也呼吁网页开发者们关注网页无障碍，这可以让我们的产品可以受众更多的用户，也是对社会的一种责任，对残障人士关爱的表现。

最后附上一些链接：
http://www.aliued.cn/2010/01/14/what-can-ued-do-for-wcag.html
http://ued.taobao.com/blog/2011/04/15/onfocus-this-blur/