SlideShare a Scribd company logo
前端开发如何实现
  信息无障碍
  网易邮箱— 黄仕彪
  201 2 年 4 月 7 日
概要

a. 是什么
    •   信息无障碍
    •   网站无障碍

•       为什么
•       怎么办
概要

a. 是什么
       信息无障碍
    •   网站无障碍

•       为什么
•       怎么办
什么是无障碍?

      道路 是无障碍的

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

        厕所 是无障碍的

        提供安全扶手
        预留轮椅回旋面积
        推拉移动门
        电动门
        … …
什么是无障碍?(续)

        红绿灯 是无障碍的

        3. 视觉障碍
        对于盲人,声音分辨
        对于色盲,动画分辨

        7. 大众及听觉障碍
        提供颜色分辨
什么是无障碍?(续)


        公交车 是无障碍的

        无障碍坡道板
        折叠座椅
        轮椅安全带
        下车提示铃开关
什么是无障碍?(续)

       手机 也是无障碍的

       … …
什么是无障碍?(续)




     无障碍并不遥远,
     细心发现的话,
     其实,
     它就在我们生活的周围
什么是信息无障碍?

   中国互联网协会给出了一个定义:
    信息无障碍是指任何人(无论是健全人还是残疾人,无论是
    年轻人还是老年人)在任何情况下都能平等的、方便地、无
    障碍地获取信息、利用信息。


   信息无障碍包括两个主要范畴:
    a. 电子和信息技术无障碍
    b.   网络无障碍
概要

a. 是什么
    •   信息无障碍
       网站无障碍

•       为什么
•       怎么办
什么是网站无障碍?

   网站无障碍是网络无障碍的一种,也就是如何让网站 内
    容和功能被所有人使用。
   前端开发过程中主要涉及的是网站无障碍。



            信息无障碍

                  网络无障碍
    电子与信息技术无障碍
                    网站无障碍
无障碍用户群
 纠正一个错误认识:信息无障碍等于服务老年人和残疾人


 其实信息无障碍面向的是任何人,主要分类:
  健全者( PD A )
  肢体障碍
  视觉障碍(盲人、视弱、色盲)
  听觉障碍
  认知障碍
  老年人
  不同语言人群
  ……
无障碍用户群(续)
 目前全球约有残疾人 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
辅助设备
 纠正一个错误认识:信息无障碍等于屏幕阅读器


 屏幕阅读器只是作为辅助设备中的一种:
   屏幕放大器
   屏幕阅读器
   PD A
   盲文转换器


 此外还有:
   拐杖
   轮椅
   ……
概要

a. 是什么
    –   信息无障碍
    –   网站无障碍

 为什么
•       怎么办
为什么要实现信息无障碍?

 国家(人权、平等… … )
 企业(法律、已被列入企业社会责任、用户忠诚度… … )
 个人(社会责任、方便自己、方便他人… … )
… …
国内外立法
•   1 990 年 美国《残疾人康复法案》第 508 节
•   1 995 年 英国《反残疾人歧视法案》
•   1 998 年 西班牙《计算机无障碍法规》
•   1 998 年 瑞典《计算机无障碍指南》

•   2003 年 荷兰《网络无障碍法规》

•   2004 年 瑞士《政府及公用事业部网络无障碍法规》
•   2004 年 日本 《日本工业协会标准》
•   2008 年 中国《信息无障碍 身体机能差异人群 网站设计无障碍技术要求》
•   ……
概要

a. 是什么
    •   信息无障碍
    •   网站无障碍

•       为什么
 怎么办
开发技术
开发技术(续)
浏览器对系统无障碍 API 的支持情况:            Windows7




 Windows               Linux   Mac/iOS
开发技术(续)
 国内屏幕阅读器:
 •   争渡读屏(免费) 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/
 •   ……
开发技术(续)
WCA G2.0
 可感知

 可操作

 可理解

 健全



http://www.w3.org/TR/WCAG/
A RI A 1.0
 Role

 States
 Properties


http://www.w3.org/TR/wai-aria/
DEMO 展示
@ va o
 ca bia
ca bia 1 63.com
  va o@
http://www.ca bia
             va o.com/

More Related Content

Viewers also liked

Oldham resume
Oldham resumeOldham resume
Oldham resume
Charlene Oldham
 
Case study is30070
Case study is30070Case study is30070
Case study is30070
08103593
 
Makarora Country Cafe
Makarora Country CafeMakarora Country Cafe
Makarora Country Cafe
Asana Kusnadi
 
Presentation on balfa brothers project
Presentation on balfa brothers projectPresentation on balfa brothers project
Presentation on balfa brothers project
08103593
 
Is 30240
Is 30240Is 30240
Is 30240
08103593
 
Revista i.c.r 1
Revista i.c.r 1Revista i.c.r 1
Revista i.c.r 1IrisPCR
 
Perspectives 3
Perspectives 3Perspectives 3
Perspectives 3
Pedro Armendariz
 
31 punga grove
31 punga grove31 punga grove
31 punga grove
Asana Kusnadi
 
1 math blog 5.2012
1  math blog 5.20121  math blog 5.2012
1 math blog 5.2012
stuckeyla54657
 
Editaldeconvocaoage 120412085537-phpapp01
Editaldeconvocaoage 120412085537-phpapp01Editaldeconvocaoage 120412085537-phpapp01
Editaldeconvocaoage 120412085537-phpapp01
valeriavideira
 
Is 30240
Is 30240Is 30240
Is 30240
08103593
 
K reading blog 5.2012
K reading blog 5.2012K reading blog 5.2012
K reading blog 5.2012
stuckeyla54657
 
звіт директора 15 16 н.р. н.р.
звіт директора 15 16 н.р. н.р.звіт директора 15 16 н.р. н.р.
звіт директора 15 16 н.р. н.р.
137nvk
 
Group project is 40430
Group project is 40430Group project is 40430
Group project is 40430
08103593
 

Viewers also liked (14)

Oldham resume
Oldham resumeOldham resume
Oldham resume
 
Case study is30070
Case study is30070Case study is30070
Case study is30070
 
Makarora Country Cafe
Makarora Country CafeMakarora Country Cafe
Makarora Country Cafe
 
Presentation on balfa brothers project
Presentation on balfa brothers projectPresentation on balfa brothers project
Presentation on balfa brothers project
 
Is 30240
Is 30240Is 30240
Is 30240
 
Revista i.c.r 1
Revista i.c.r 1Revista i.c.r 1
Revista i.c.r 1
 
Perspectives 3
Perspectives 3Perspectives 3
Perspectives 3
 
31 punga grove
31 punga grove31 punga grove
31 punga grove
 
1 math blog 5.2012
1  math blog 5.20121  math blog 5.2012
1 math blog 5.2012
 
Editaldeconvocaoage 120412085537-phpapp01
Editaldeconvocaoage 120412085537-phpapp01Editaldeconvocaoage 120412085537-phpapp01
Editaldeconvocaoage 120412085537-phpapp01
 
Is 30240
Is 30240Is 30240
Is 30240
 
K reading blog 5.2012
K reading blog 5.2012K reading blog 5.2012
K reading blog 5.2012
 
звіт директора 15 16 н.р. н.р.
звіт директора 15 16 н.р. н.р.звіт директора 15 16 н.р. н.р.
звіт директора 15 16 н.р. н.р.
 
Group project is 40430
Group project is 40430Group project is 40430
Group project is 40430
 

Similar to 信息无障碍

104上seminar 20151211-1
104上seminar 20151211-1104上seminar 20151211-1
104上seminar 20151211-1Gin-You Wang
 
打造網站親和力
打造網站親和力打造網站親和力
打造網站親和力
Yvonne Yu
 
設計報告 黃維光 陳隸
設計報告 黃維光 陳隸設計報告 黃維光 陳隸
設計報告 黃維光 陳隸taya86315
 
HearMe Final Face-to-face Presentation
HearMe Final Face-to-face Presentation HearMe Final Face-to-face Presentation
HearMe Final Face-to-face Presentation
NTUST
 
人工智慧在台灣: 產業轉型的契機與挑戰
人工智慧在台灣: 產業轉型的契機與挑戰人工智慧在台灣: 產業轉型的契機與挑戰
人工智慧在台灣: 產業轉型的契機與挑戰
Sheng-Wei (Kuan-Ta) Chen
 
F7104 ch01
F7104 ch01F7104 ch01
F7104 ch01
Yender McLee
 

Similar to 信息无障碍 (6)

104上seminar 20151211-1
104上seminar 20151211-1104上seminar 20151211-1
104上seminar 20151211-1
 
打造網站親和力
打造網站親和力打造網站親和力
打造網站親和力
 
設計報告 黃維光 陳隸
設計報告 黃維光 陳隸設計報告 黃維光 陳隸
設計報告 黃維光 陳隸
 
HearMe Final Face-to-face Presentation
HearMe Final Face-to-face Presentation HearMe Final Face-to-face Presentation
HearMe Final Face-to-face Presentation
 
人工智慧在台灣: 產業轉型的契機與挑戰
人工智慧在台灣: 產業轉型的契機與挑戰人工智慧在台灣: 產業轉型的契機與挑戰
人工智慧在台灣: 產業轉型的契機與挑戰
 
F7104 ch01
F7104 ch01F7104 ch01
F7104 ch01
 

信息无障碍