周末有幸参加了淘宝技术嘉年华，这一界的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"让其能支持读屏软件。 

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

在页面交互时弹出了框，要让框得到焦点，否则盲人不知道有提示框弹出。

不要使用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/  

首页顶部：

为各个IE版本设置了class，目的应该是处理各种css hack。

继续看：

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

 当使用了这个meta后，网页宽度默认为设备屏幕的宽度，这个标记适用于手机，平板电脑等移动设备。

看下面的JS代码：

<script>function bust(){document.write='';window.top.location=window.self.location;setTimeout(function(){document.body.innerHTML='';},0);window.self.onload=function(evt){document.body.innerHTML='';};}if(window.top !== window.self){try{if (window.top.location.host){}else{bust();}}catch(ex){bust();}}</script>  

这里目的是为了防止网站被iframe的安全处理，冒似是参考的twitter,可以看我前一篇文章。

看下一个亮点：

第一个不多说了，每个网站都应该有。

app-touch-icon作用是ipad和iphone创建快捷方式时的图标。

rel="search"则是为了应对firefox右上角出现它的搜索选项，chrome下好像没有这个东东。

当浏览器为IE6时，加载pngfix.js，pngfix目的是在IE6下能够设定PNG图片的透明度。冒似这样的开源JS库有不少，IE6要用到透明时很棒的解决方案。

再往下看：

这里是谷歌统计的ga.js，异步加载的，没什么好说的。

再最下面只有一个很小的JS。整个首页的优化我认为做到了极致，也充分利用了各种资源，首页只用到了首页要用的JS，并没加载其它。

看内页（登录后的）：

<script type="text/javascript" src="http://www.yupoo.com/js/bootstrap.js?15126871.js"></script>

Modernizr（官方被墙了） + labjs放到了一起，大小只有9k。

下一亮点：

 如果是非ie6则用了:hover伪类来做鼠标移上去的样式处理，ie6则用js来解决同样的效果，这样的代码有好几处，充份利用了浏览器自有功能。

最后一个亮点：

利用3K大小左右的labjs加载了页面所用到的全部JS，异步并行加载且保证了加载和执行顺序，充分节约了浏览器资源。总之yupoo前端的处方面在我看过的这么些网站中算很棒的了，不像大多数网站，一系列的<script src="xxx.js"，极其影响效率。

 yupoo的页面结构不算复杂，代码不量不大所以很容易看清楚结构。只看了下首页和登录后的首页，这样的代码结构其实正是我所想的。Modernizr + labjs都是目前比较新且炒得比较火的JS库，有兴趣的可以google一下，yupoo在前端性能方面可谓算是做得很不错的了,赞一个！

当然有亮点肯定不止这么一点，不足也肯定有，待有时间再细细品尝吧！

附上介绍modernizr和labjs的相关链接：  

【译文】Modernizr——为HTML5和CSS3而生！

LABjs分析

记录一下，感觉蛮有意思的

} 

在线生成CSS圆角代码，推荐http://www.spiffycorners.com/

预览图：