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" οnsubmit="submit()" />这种方式来进行表单提交，如果一定要使用，请加上tabindex="0"让其能支持读屏软件。

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

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

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

使用οnmοusedοwn="init()"此类脚本操作时请考虑到盲人朋友，尽量也支持键盘，比如加上 οnfοcus="init()" 或者 οnkeydοwn="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/

转载于:https://www.cnblogs.com/chaoren1641/archive/2011/07/10/2102203.html

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

Google、Facebook、GitHub、Babel核心成员齐聚，第13届D2前端技术论坛正式启动
由阿里巴巴前端委员会举办的第13届D2前端技术论坛将于2019年1月6日在杭州举办. 本次会议将设置3个分会场,6大主题方向,邀请国内外嘉宾为大家带来精彩的演讲.分享的内容不仅包括未来方向型前沿的内容 ...
记录一次参加D2前端技术论坛的杭州之行
前言在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...
前端智能化实践（附：D2 前端技术论坛 PPT 合集）
大家好,我们是来自阿里巴巴淘系技术部的狼叔.卓风.感谢 D2 组委会,让我们有机会在这里分享,关于<前端智能化实践-- P2C 从需求文档生成代码>. 淘系技术微信公众号后台回复「D2」即 ...
第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛,如约而至. D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2),是由阿里经济体前端 ...
官宣！前端热爱，技术无界，第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛,如约而至. D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2),是由阿里经济体前端 ...
记录一次参加D2前端技术论坛的杭州之行 1
前言在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...
D2 前端技术论坛(上海)
友情帮推广一下这个 D2 技术论坛会议.会议也是以技术会友,门票是免费的,感兴趣的话就去参加一下吧,和前端技术高手面对面交流.前端技术我不懂,所以不去参加了,不过支付宝会有不少同事去参加. 关于D2 ...
D2 前端技术论坛流水账
本博客同步自我的GitHub博客一直想去阿里看看,这次成行,至少 BAT 三总部签到成就是 get 了.经历了多日的降温降水,初到杭州,就赶上了升温,即使穿短袖在阳光下走走也会微微流汗.一大早出门前 ...
第十五届D2前端技术论坛笔记
目录 1. 前端故障演练的探索与实践 2. 前端智能化实践- P2C 从需求文档生成代码 3. 深入剖析海量数据场景下的用户行为分析方案 4. 钉钉表格,从零到一打造在线 Excel 5. 跨端的另一 ...

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

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

最新文章

热门文章