周末有幸参加了淘宝技术嘉年华,这一界的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/  

posted @ 2011-07-10 20:41 chaoren1641 阅读(827) 评论(2) 推荐(2) 编辑
摘要: 听说yupoo改版了,打开看了一下,我对设计风格什么的不太懂,所以直接看了下源代码,发现他们用了Modernizr和labjs这两个工具,所以很有兴致的分析了一下前端代码,的确做得不错的说。首页顶部:<!--[ifltIE7]><htmlclass="no-jsieie6"lang="zh"><![endif]--><!--[ifIE7]><htmlclass="no-jsieie7"lang="zh"><![endif]--><!--[ 阅读全文
posted @ 2011-06-02 20:06 chaoren1641 阅读(8021) 评论(5) 推荐(4) 编辑
摘要: 记录一下,感觉蛮有意思的functionbust(){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){//areyoutryingtoputselfinaniframe?try{if(w 阅读全文
posted @ 2011-05-21 23:43 chaoren1641 阅读(757) 评论(0) 推荐(0) 编辑
摘要: w3ctech在上周末在上海举行了一场针对于HTML5的技术交流会,有幸与团队同事一起参与其中。第一个开场嘉宾是W3C的工作人员,一位漂亮MM,全面的介绍了W3C的来源和组织架构,还有W3C的工作内容,让我们了解了以往不知道的W3C以及刚刚成立不久的W3C中国。其幽默风趣的演讲让在场笑声不断,期间提到了国内的20多个浏览器在为IE6做支持,希望国内前端者们能支持W3C组织和帮助降低IE6在国内的使用率。来自opera的子斌主题为“不懂HTML5非好汉”,讲述了HTML的发展历程以及HTML5的由来。不过这个后来几乎每两个嘉宾就有一个要讲HTML历史,有点听腻了。来自腾讯的前端工程师讲述了Web 阅读全文
posted @ 2011-04-26 10:36 chaoren1641 阅读(408) 评论(0) 推荐(0) 编辑
摘要: Zoomifyer介绍 Zoomifyer彻底改变了使用图像的方式,它在任何尺寸图像的浏览上结合了快速缩放和全景浏览功能 。Zoomifyer增强了发布无缝的Flash整合能力,具有一步完成图像预处理、所有需要的界面选项、完整的包括FLA源码在内的可定制性、100%标准的发布-可以产生精确的JPEGs, HTML, and Flash文件等特点。此处它还为幻灯片播放、3D物体和全景动画、基于we... 阅读全文
posted @ 2009-01-06 22:14 chaoren1641 阅读(4644) 评论(18) 推荐(0) 编辑
摘要: javascript(以下简称JS)不是一门真的的面像对像语言,在JS里并没有正式的类,即使没有真正的类,我们还是叫它类!在这里,我学习一下怎么在JS使用重载! 在JS中有一个特殊对像arguments,我们在开发中不需要显示指出它。如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.Co... 阅读全文
posted @ 2008-09-02 23:43 chaoren1641 阅读(511) 评论(0) 推荐(0) 编辑
摘要: 有时候需要做一个像资源管理器一样的东西来查看服务器中的文件,怎么做呢,我写了一个 using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using... 阅读全文
posted @ 2007-09-19 23:42 chaoren1641 阅读(337) 评论(0) 推荐(0) 编辑
摘要: 在IBatisNet中使用了它自带的数据源providers.config文件,里面包含了许多数据库访问的驱动~ 昨天在装完系统后,发现以前的源码不能运行了,提示找不到Oracle.DataAccess, Version=10.1.0.301, Culture=neutral, PublicKeyToken=89b483f429c47342" ,这可就郁闷了,装系统之前还好好的,调试了半天程序也... 阅读全文
posted @ 2007-08-16 13:24 chaoren1641 阅读(1289) 评论(2) 推荐(0) 编辑
摘要: 在.NET平台下,关于数据持久层框架非常多,本文主要对如下几种做简要的介绍并推荐一些学习的资源:1.NHibernate2.NBear3.CastleActiveRecord4.iBATIS.NET5.DAAB附加介绍:DLinq一.NHibernate提起NHibernate,相信大家都不陌生,NHibernate来源于非常优秀的基于Java的Hibernate关系型持久化工具,它从数据库底层来持久化.Net对象到关系型数据库,NHibernate为我们完成这一切,而不用自己写SQL语句去操作数据库对象,所写的代码仅仅和对象关联,NHibernat自动产生SQL语句,并确保对象提交到正确的表 阅读全文
posted @ 2007-06-15 09:49 chaoren1641 阅读(518) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示