Web Accessibility
How Blind People Read the Internet?                  See           Screen reader
Let’s begin with a game
What can we do?
Principle•   Perceivable (可感知性).•   Operable .•   Understandable.•   Compatible
Semanticsdiv – division         p – paragraphul – unordered list    ol – ordered listdl – definition list   dd – define de...
tabindex• 当使用键盘时,tabindex是个关键因素,它用来定位html元素.• tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)• 原本在Html中,默认只有链接a和表单元素可以被键盘访问(即使是a ...
design
accesskey• 台湾行政院研考会将这种方法写入了无障碍网站规范中,  定位点又称为导盲砖,独创性的使用三个冒号(:::)来表 示,主要用来帮助用户快速定位和搜索,代码如下: <a accesskey="U" href="#" title=...
WAI-ARIA• Web Accessibility Initiative‘s Accessible Rich  Internet Applications Suite• role   – banner、slider、contentinfo、...
打个例子•   ebay君•   首页君•   天猫君            大家好,我又来了•   一淘君
根据中国残疾人联合会权威发布的数据,我国现有8300万残疾人,占全国人口总数的6.34%,其中视力障碍的比例是14.86%、听力和语言残疾的比例是25.69%%、肢体残疾比例是的29.07%。
据不完全统计及估算,淘宝网3.7亿(2011年)注册会员中,残疾人会员的数量超过1000万,他们在淘宝上购物、开店,在获得购物便利的同时还实现了在淘宝上创业、就业,在获得经济收入的同时收获了自尊、自信和自我实现。
我们比想象中更有力量加油诸君
• 淘宝无障碍实验室• 前端无障碍wiki。• 开发检测工具TBAT
Wai
Upcoming SlideShare
Loading in …5
×

Wai

206 views
130 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
206
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wai

  1. 1. Web Accessibility
  2. 2. How Blind People Read the Internet? See Screen reader
  3. 3. Let’s begin with a game
  4. 4. What can we do?
  5. 5. Principle• Perceivable (可感知性).• Operable .• Understandable.• Compatible
  6. 6. Semanticsdiv – division p – paragraphul – unordered list ol – ordered listdl – definition list dd – define describe dt – define itemh1 – header level 1tr – table row td – table data cell
  7. 7. tabindex• 当使用键盘时,tabindex是个关键因素,它用来定位html元素.• tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)• 原本在Html中,默认只有链接a和表单元素可以被键盘访问(即使是a 也必须加上href属性才可以)。但是aria允许tabindex指定给任何html元 素• 当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照 元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺 序,依然是按照html文档中的顺序来定位。• 当tabindex=-1时,该元素用tab键获取不到焦点。• 当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于 tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。 – 在IE中,tabindex范围在1到32767之间(包括32767)。 – 在FF, Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时 一样。
  8. 8. design
  9. 9. accesskey• 台湾行政院研考会将这种方法写入了无障碍网站规范中, 定位点又称为导盲砖,独创性的使用三个冒号(:::)来表 示,主要用来帮助用户快速定位和搜索,代码如下: <a accesskey="U" href="#" title="顶部区域"> ::: </a> <a accesskey="L" href="#" title="左侧区域"> ::: </a> <a accesskey="C" href="#" title="中间区域"> ::: </a> <a accesskey="R" href="#" title="右侧区域"> ::: </a> <a accesskey="B" href="#" title="底部区域"> ::: </a>
  10. 10. WAI-ARIA• Web Accessibility Initiative‘s Accessible Rich Internet Applications Suite• role – banner、slider、contentinfo、form、main、 navigation、search – menu、menuitem、button、radio• Status – aria-checked、aria-haspopup – aria-label、aria-labelledby• Opera 9.5 +, Firefox 1.5 +, IE8+
  11. 11. 打个例子• ebay君• 首页君• 天猫君 大家好,我又来了• 一淘君
  12. 12. 根据中国残疾人联合会权威发布的数据,我国现有8300万残疾人,占全国人口总数的6.34%,其中视力障碍的比例是14.86%、听力和语言残疾的比例是25.69%%、肢体残疾比例是的29.07%。
  13. 13. 据不完全统计及估算,淘宝网3.7亿(2011年)注册会员中,残疾人会员的数量超过1000万,他们在淘宝上购物、开店,在获得购物便利的同时还实现了在淘宝上创业、就业,在获得经济收入的同时收获了自尊、自信和自我实现。
  14. 14. 我们比想象中更有力量加油诸君
  15. 15. • 淘宝无障碍实验室• 前端无障碍wiki。• 开发检测工具TBAT

×