Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
35
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Web Accessibility
  • 2. How Blind People Read the Internet? See Screen reader
  • 3. Let’s begin with a game
  • 4. What can we do?
  • 5. Principle• Perceivable (可感知性).• Operable .• Understandable.• Compatible
  • 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. 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. design
  • 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. 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. 打个例子• ebay君• 首页君• 天猫君 大家好,我又来了• 一淘君
  • 12. 根据中国残疾人联合会权威发布的数据,我国现有8300万残疾人,占全国人口总数的6.34%,其中视力障碍的比例是14.86%、听力和语言残疾的比例是25.69%%、肢体残疾比例是的29.07%。
  • 13. 据不完全统计及估算,淘宝网3.7亿(2011年)注册会员中,残疾人会员的数量超过1000万,他们在淘宝上购物、开店,在获得购物便利的同时还实现了在淘宝上创业、就业,在获得经济收入的同时收获了自尊、自信和自我实现。
  • 14. 我们比想象中更有力量加油诸君
  • 15. • 淘宝无障碍实验室• 前端无障碍wiki。• 开发检测工具TBAT