1. Web Accessibility

3. How Blind People Read the Internet?
See
Screen reader

4. Let’s begin with a game

5. What can we do?

6. Principle
• Perceivable (可感知性).
• Operable .
• Understandable.
• Compatible

7. Semantics
div – division p – paragraph
ul – unordered list ol – ordered list
dl – definition list dd – define describe
dt – define item
h1 – header level 1
tr – table row td – table data cell

8. 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时
一样。

9. design

10. 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>

11. 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+

12. 打个例子
• ebay君
• 首页君
• 天猫君 大家好，我又来了
• 一淘君

13. 根据中国残疾人联合会权威发布的数据，我国现有8300万
残疾人，占全国人口总数的6.34%，其中视力障碍的比例
是14．86%、听力和语言残疾的比例是25．69％%、肢体
残疾比例是的29．07%。

14. 据不完全统计及估算，淘宝网3.7亿（2011年）注册会员
中，残疾人会员的数量超过1000万，他们在淘宝上购物、
开店，在获得购物便利的同时还实现了在淘宝上创业、就
业，在获得经济收入的同时收获了自尊、自信和自我实现。

15. 我们比想象中更有力量
加油诸君

16. • 淘宝无障碍实验室
• 前端无障碍wiki。
• 开发检测工具TBAT