什么时候信息无障碍？为什么要做信息无障碍？怎么实现信息无障碍？

1. 前端开发如何实现
信息无障碍
网易邮箱— 黄仕彪
201 2 年 4 月 7 日

2. 概要
a. 是什么
• 信息无障碍
• 网站无障碍
• 为什么
• 怎么办

3. 概要
a. 是什么
 信息无障碍
• 网站无障碍
• 为什么
• 怎么办

4. 什么是无障碍？
道路 是无障碍的
人行盲道
提示盲道
路口须设缘石坡道
坡道和台阶的两侧
应设扶手
… …

5. 什么是无障碍？（续）
厕所 是无障碍的
提供安全扶手
预留轮椅回旋面积
推拉移动门
电动门
… …

6. 什么是无障碍？（续）
红绿灯 是无障碍的
3. 视觉障碍
对于盲人，声音分辨
对于色盲，动画分辨
7. 大众及听觉障碍
提供颜色分辨

7. 什么是无障碍？（续）
公交车 是无障碍的
无障碍坡道板
折叠座椅
轮椅安全带
下车提示铃开关

8. 什么是无障碍？（续）
手机 也是无障碍的
… …

9. 什么是无障碍？（续）
无障碍并不遥远，
细心发现的话，
其实，
它就在我们生活的周围

10. 什么是信息无障碍？
 中国互联网协会给出了一个定义：
信息无障碍是指任何人（无论是健全人还是残疾人，无论是
年轻人还是老年人）在任何情况下都能平等的、方便地、无
障碍地获取信息、利用信息。
 信息无障碍包括两个主要范畴：
a. 电子和信息技术无障碍
b. 网络无障碍

11. 概要
a. 是什么
• 信息无障碍
 网站无障碍
• 为什么
• 怎么办

12. 什么是网站无障碍？
 网站无障碍是网络无障碍的一种，也就是如何让网站 内
容和功能被所有人使用。
 前端开发过程中主要涉及的是网站无障碍。
信息无障碍
网络无障碍
电子与信息技术无障碍
网站无障碍

13. 无障碍用户群
 纠正一个错误认识：信息无障碍等于服务老年人和残疾人
 其实信息无障碍面向的是任何人，主要分类：
 健全者（ PD A ）
 肢体障碍
 视觉障碍（盲人、视弱、色盲）
 听觉障碍
 认知障碍
 老年人
 不同语言人群
 ……

14. 无障碍用户群（续）
 目前全球约有残疾人 6.5 亿，按照有一名家庭成员为残疾人计算，约有 20
亿人受到残疾问题的直接影响，相当于世界人口的三分之一
 http://www.un.org/chinese/disabilities/default.asp?pid=1098
 2006 年全国各类残疾人总数为 8296 万人，残疾人占全国总人口的比例为
6.34%
 http://www.cdpf.org.cn/sytj/content/2008-04/07/content_30316033.htm
 有一个预测的数据显示，到 2050 年中国将有 4.3 亿的老龄人，中国老龄化的
人口将占到接近 20%
 http://base.china-europa-forum.net/rsc/zh/documents/document-1106.html

15. 辅助设备
 纠正一个错误认识：信息无障碍等于屏幕阅读器
 屏幕阅读器只是作为辅助设备中的一种：
 屏幕放大器
 屏幕阅读器
 PD A
 盲文转换器
 此外还有：
 拐杖
 轮椅
 ……

16. 概要
a. 是什么
– 信息无障碍
– 网站无障碍
 为什么
• 怎么办

17. 为什么要实现信息无障碍？
 国家（人权、平等… … ）
 企业（法律、已被列入企业社会责任、用户忠诚度… … ）
 个人（社会责任、方便自己、方便他人… … ）
… …

18. 国内外立法
• 1 990 年 美国《残疾人康复法案》第 508 节
• 1 995 年 英国《反残疾人歧视法案》
• 1 998 年 西班牙《计算机无障碍法规》
• 1 998 年 瑞典《计算机无障碍指南》
• 2003 年 荷兰《网络无障碍法规》
• 2004 年 瑞士《政府及公用事业部网络无障碍法规》
• 2004 年 日本 《日本工业协会标准》
• 2008 年 中国《信息无障碍 身体机能差异人群 网站设计无障碍技术要求》
• ……

19. 概要
a. 是什么
• 信息无障碍
• 网站无障碍
• 为什么
 怎么办

20. 开发技术

21. 开发技术（续）
浏览器对系统无障碍 API 的支持情况： Windows7
Windows Linux Mac/iOS

22. 开发技术（续）
 国内屏幕阅读器：
• 争渡读屏（免费） http://www.zdsr.net/
• 永德读屏 http://www.wangyongde.com
• 阳光读屏 http://www.cbph.org.cn/Article/ShowClass.asp?ClassID=5
• 晨光读屏（粤语、免费） http://www.retina.org.hk/ckrpsc.htm
• ……
 国外屏幕阅读器：
• NVDA （免费） http://www.nvda-project.org/
• JAWS http://www.freedomscientific.com/products/fs/jaws-product-page.asp
• Window-Eyes http://www.gwmicro.com/window-eyes/
• ZoomText http://www.aisquared.com/zoomtext
• VoicOver （苹果自带） http://www.apple.com.cn/accessibility/voiceover/
• ……

23. 开发技术（续）

24. WCA G2.0
 可感知
 可操作
 可理解
 健全
http://www.w3.org/TR/WCAG/

25. A RI A 1.0
 Role
 States
 Properties
http://www.w3.org/TR/wai-aria/

26. DEMO 展示

28. @ va o
ca bia
ca bia 1 63.com
va o@
http://www.ca bia
va o.com/