wai
TRANSCRIPT
Web Accessibility
How Blind People the Internet?
SeeRead
Screen reader
What can we do?
Principle
• Perceivable ( 可感知性 ).• Operable .• Understandable. • Compatible
Semantics
div – division p – paragraphul – unordered list ol – ordered list dl – definition list dd – define describe
dt – define itemh1 – header level 1 tr – table row td – table data cell
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
时一样。
design
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>
WAI-ARIA
• Web Accessibility Initiative‘s Accessible Rich Internet Applications Suite
• role– banner 、 slider 、 contentinfo 、 form 、 main 、 navi
gation 、 search– menu 、 menuitem 、 button 、 radio
• Status– aria-checked 、 aria-haspopup– aria-label 、 aria-labelledby
• Opera 9.5 +, Firefox 1.5 +, IE8+
打个例子
• ebay君• 首页君• 天猫君• 一淘君
大家好，我又来了
根据中国残疾人联合会权威发布的数据，我国现有 8300万残疾人，占全国人口总数的 6.34% ，其中视力障碍的比例是 14 ． 86% 、听力和语言残疾的比例是 25 ． 69 ％% 、肢体残疾比例是的 29 ． 07% 。
据不完全统计及估算，淘宝网 3.7 亿（ 2011 年）注册会员中，残疾人会员的数量超过 1000 万，他们在淘宝上购物、开店，在获得购物便利的同时还实现了在淘宝上创业、就业，在获得经济收入的同时收获了自尊、自信和自我实现。
我们比想象中更有力量加油诸君
• 淘宝无障碍实验室• 前端无障碍wiki。• 开发检测工具TBAT