1. 《一个盲人眼中的网页内容无障碍体验与设计》
主要内容：
1 自我介绍
2 读屏软件介绍
读屏软件基本功能概述
读屏软件就是朗读屏幕上的信息，屏幕上显示什么，读屏就应该朗读什么。
如何朗读，朗读多少是人控制的，就好像我们用眼睛看，看哪里，怎么看都是我
们说了算。
键盘操作是读屏软件的核心操作方式。
键盘操作并非读屏软件专有，而是 windows 系统默认功能，是天生的功能，是所
有人都可以享受到的功能。
一个软件能否用键盘操作应该是衡量软件是否完善的重要指标， 不支持键盘操作
的软件是个瘸腿的软件是个残疾人。
读屏软件操作网页
具有 tab 焦点的网页元素
表单元素
innertext，title，alt，value 等是读屏软件获取的主要信息。
上下左右方向键是控制操作网页的主要热键。
3 信息无障碍内容介绍
信息无障碍
网页内容无障碍
信息无障碍的两个重要元素：方便、平等
无障碍的适应人群（老年人、儿童、视障人、智力障碍、肢体残障等）
信息无障碍并不是什么高难的课题，也不需要额外的成本
无障碍不会影响美观，也不影响交互
遵循无障碍有什么好处
遵循无障碍会给公司带来什么
什么时候应该考虑无障碍？
就 web 无障碍而言，需要标准制定者，浏览器开发商，屏幕阅读器开发商，web
开发者，视障用户的共同努力，很多特性需要浏览器和读屏软件的共同支持。
关于给特定人群开发专用版网页的讨论
信息无障碍国内外发展情况
1998 年 wcag1.0
2008 年 wcag2.0
2008 年工信部发布《身体机能差异人群网页内容无障碍标准》
WAI-ARIA
淘宝网和腾讯朋友是国内实践 aria 的典型范例。
4 常见的网页内容无障碍问题
4.1 web 标准相关的无障碍问题
确保 dom 顺序与视觉顺序一致
表单元素要使用 lable 关联提示文本
img：
要有 alt 属性，这是对读屏软件、搜索引擎、图片地址失效等都有好处的。

2. 如果文本嵌入在图像中，将文本添加到 alt 属性。
装饰性图片应该由 CSS 处理。
如果一个链接只包含图像内容， 那么 alt 文本应描述链接的功能，而不是图像本
身。
a 元素：
一个链接在脱离语境时仍然有意义；
链接文本在它出现的页面上应该是唯一的（即不同资源不要使用相同的链接文
本）；
要有 href 属性
span 等没有 tab 焦点的元素如果绑定 onclick，要增加 tabindex 属性
验证 HTML 和 CSS 对可访问性是有益的。虽然不一定要非常完美，但通过验证是
终极目标。无效的 HTML 或 CSS 会给辅助技术带来问题，即使在浏览器中的表现
是好的。 健壮的网页更容易在各种浏览器和设备中工作。易于维护一致编码的页
面更容易创建、维护和解决问题。可靠的网页渲染和执行更可信。通过验证的代
码更容易支持浏览器和设备的未来版本。 技术上的通过验证的文档并不能保证其
可访问性。一个完全通过验证的文档，如果它的语义完全是错误的话，将损害文
档的可访问性。例如：标题结构不合理，使用 blockquote 来缩进文字，在布局
表格中使用 summary 属性。为了验证您的代码，你可以使用 W3C 的
相关 web 标准检测工具和网址
http://validator.w3.org/
http://firefox.cita.uiuc.edu
4.2 onfocus=this.blur()的滥用
典型反例：
http://pinyin.sogou.com
www.yy.com
4.3 弹出层的焦点处理（包括弹出之后的默认焦点以及层消失后的焦点处理）
层弹出之后，把焦点给到新弹出层的一个元素上。
层消失后，把焦点还给触发他的那个元素。
5 结语
谢谢大家给我这次分享的机会， 最后我想引用今天一位嘉宾曾说过的一段话作为
今天的结语：
让每个网站都可以很方便的被所有人访问， 每个软件都可以很方便被所有人使用，
让每个信息都可以让所有人很方便的获得，不歧视任何一个特定的人群，是每个
IT 公司和 IT 工程师共同的社会责任，也是一个社会文明的体现。如果到今天，
我们的设计师还在做象 onfocus=blur 这样的有障碍设计，那是这个设计师的耻
辱，这个产品的污点，社会文明的倒退。
信息无障碍在国内还是刚刚起步，网页内容的无障碍也还有很长很长的路要走，
这需要我们大家一起努力。
今天我能来到这里，能与大家分享这些内容，我觉得非常高兴，虽然我说了很多
与盲人有关的障碍， 但我想这会是一块敲门砖，希望可以打开迈向信息无障碍的
大门。
我相信我们的 d2forum 将会在推动无障碍道路上卖出更大的步伐。
我相信未来我们的信息之路会变得越来越通畅。
最后谢谢大家。

3. 相关网址推荐：
开发和测试访问无障碍的 Web 应用
http://www.ibm.com/developerworks/cn/web/1003_sunqy_access/
盲人站长深恶痛绝的 onfocus=“this。blur（）”
http://ued.taobao.com/blog/2011/04/15/onfocus-this-blur/
进步博客：
http://www.topcss.org
网站开发人员应该知道的 62 件事
http://www.ruanyifeng.com/blog/2010/11/61_things_every_web_developer_
should_know.html