Your SlideShare is downloading. ×
0
ARIA with TaoBao                 承玉@淘宝        yiminghe@gmail.com
起于”投诉”• 发布页面编辑器更新,控制了焦点
• 1. WCAG• 2.语音验证码研究• 3.无障碍实验室• 4.社会责任部的关注
• WAI ARIA 简介• ARIA 基础• ARIA 淘宝实践
问题
问题盲人需要 AT (可访问性工具)
问题• 但更需要的是”盲道”
现实• 你的网站 ”提供” 了么?
• WAI ARIA 简介
WAI ARIA 简介• W• A• I•   A•   R•   I•   A
WAI ARIA 简介• Web• Accessibility• Initiative•   Accessible•   Rich•   Internet•   Application
How• ARIA : web app 与 AT(可访问性工具) 的桥梁.             ARIA           javascript              css             html
• ARIA 基础
ARIA 基础• Role : 描述区域作用或组件类型。侧重语义  信息.• State/property : 描述状态与属性.• keydown + tabIndex
role
State/property
国外
国外
ARIA with TaoBao• 首页实践
路标角色
吊顶 ARIAaria-haspopup   aria-label   role=‘menu’   aria-hidden=‘false’1.   Tab 到顶部导航链接2.   在链接上键盘右键弹出当前链接子菜单3.   Tab 继续在当前子...
Search tab ARIA
右侧区域 ARIA
demo
• KISSY 的一些尝试
组件级别• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
KISSY.Overlay• role=‘dialog’• aria-labelledby• aria-hidden• 捕获焦点
Overlay demo
KISSY.MenuButton•   role = ‘button’•   aria-haspopup aria-expanded•   aria-pressed aria-disabled•   aria-activedescendant•...
KISSY.Menu•   role = ‘menu’ / ‘menuitem’•   aria-haspopup•   aria-activedescendant•   aria-disabled aria-pressed
基础架构• MVC 分层 : ARIA -> View                           Controller                     1                         -model : Mo...
Tabs Transform• ARIA in KISSY.Tabs
KISSY.Tabs practice• 1. 挑选合适的角色 – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
• 2. 设置 aria 状态(属性)的初始值 – Tabpanel   • aria-hidden   • aria-labelledby – Tab   • tabindex , current active = 0 , others = -1
• 3. 绑定键盘事件,转移逻辑状态. – keydown / keypress
• 4. 同组件逻辑状态与 aria 状态(属性)并设置焦点. – AOP Event-Driven
ARIA问题• 兼容性问题:读屏器*浏览器• ARIA 组件交互规范数量不足
tools• Ie8,9 : http://windows.microsoft.com/en-  US/internet-explorer/products/ie/home• Firefox : http://www.mozilla.com/•...
Refer• WAI-ARIA - w3.org/TR/wai-aria• Overview - w3.org/WAI/intro/aria• ARIA Primer - www.w3.org/TR/waiaria-primer/• ARIA ...
refer• Mozilla -  http://developer.mozilla.org/en/docs/Accessible_DH  TML• UIUC tests - http://test.cita.uiuc.edu/aria• Li...
Thanks to WAI
But
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
何一鸣:【无障碍访问】Aria in taobao
Upcoming SlideShare
Loading in...5
×

何一鸣:【无障碍访问】Aria in taobao

5,950

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,950
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "何一鸣:【无障碍访问】Aria in taobao"

  1. 1. ARIA with TaoBao 承玉@淘宝 yiminghe@gmail.com
  2. 2. 起于”投诉”• 发布页面编辑器更新,控制了焦点
  3. 3. • 1. WCAG• 2.语音验证码研究• 3.无障碍实验室• 4.社会责任部的关注
  4. 4. • WAI ARIA 简介• ARIA 基础• ARIA 淘宝实践
  5. 5. 问题
  6. 6. 问题盲人需要 AT (可访问性工具)
  7. 7. 问题• 但更需要的是”盲道”
  8. 8. 现实• 你的网站 ”提供” 了么?
  9. 9. • WAI ARIA 简介
  10. 10. WAI ARIA 简介• W• A• I• A• R• I• A
  11. 11. WAI ARIA 简介• Web• Accessibility• Initiative• Accessible• Rich• Internet• Application
  12. 12. How• ARIA : web app 与 AT(可访问性工具) 的桥梁. ARIA javascript css html
  13. 13. • ARIA 基础
  14. 14. ARIA 基础• Role : 描述区域作用或组件类型。侧重语义 信息.• State/property : 描述状态与属性.• keydown + tabIndex
  15. 15. role
  16. 16. State/property
  17. 17. 国外
  18. 18. 国外
  19. 19. ARIA with TaoBao• 首页实践
  20. 20. 路标角色
  21. 21. 吊顶 ARIAaria-haspopup aria-label role=‘menu’ aria-hidden=‘false’1. Tab 到顶部导航链接2. 在链接上键盘右键弹出当前链接子菜单3. Tab 继续在当前子菜单导航4. Esc 关闭子菜单回到当前链接
  22. 22. Search tab ARIA
  23. 23. 右侧区域 ARIA
  24. 24. demo
  25. 25. • KISSY 的一些尝试
  26. 26. 组件级别• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
  27. 27. KISSY.Overlay• role=‘dialog’• aria-labelledby• aria-hidden• 捕获焦点
  28. 28. Overlay demo
  29. 29. KISSY.MenuButton• role = ‘button’• aria-haspopup aria-expanded• aria-pressed aria-disabled• aria-activedescendant• aria-labelledby
  30. 30. KISSY.Menu• role = ‘menu’ / ‘menuitem’• aria-haspopup• aria-activedescendant• aria-disabled aria-pressed
  31. 31. 基础架构• MVC 分层 : ARIA -> View Controller 1 -model : Model -view : View +onClick() 1 +onKeydown() 1 1 View Model -el -data +onClick() +getValue() -updateHtml() +setValue() -updateClass() -updateAria()
  32. 32. Tabs Transform• ARIA in KISSY.Tabs
  33. 33. KISSY.Tabs practice• 1. 挑选合适的角色 – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
  34. 34. • 2. 设置 aria 状态(属性)的初始值 – Tabpanel • aria-hidden • aria-labelledby – Tab • tabindex , current active = 0 , others = -1
  35. 35. • 3. 绑定键盘事件,转移逻辑状态. – keydown / keypress
  36. 36. • 4. 同组件逻辑状态与 aria 状态(属性)并设置焦点. – AOP Event-Driven
  37. 37. ARIA问题• 兼容性问题:读屏器*浏览器• ARIA 组件交互规范数量不足
  38. 38. tools• Ie8,9 : http://windows.microsoft.com/en- US/internet-explorer/products/ie/home• Firefox : http://www.mozilla.com/• Chrome : http://www.google.com/chrome/• 争渡读屏 : http://www.zdsr.net/• Nvda screen render : http://www.nvda-project.org/• firefox accessibility extension : http://firefox.cita.uiuc.edu/• WAVE : http://wave.webaim.org/
  39. 39. Refer• WAI-ARIA - w3.org/TR/wai-aria• Overview - w3.org/WAI/intro/aria• ARIA Primer - www.w3.org/TR/waiaria-primer/• ARIA Best Practices - www.w3.org/TR/wai-aria- practices/• Gez Lemons tutorial - dev.opera.com/articles/view/introduction-to-wai- aria/• Codetalks - http://wiki.codetalks.org
  40. 40. refer• Mozilla - http://developer.mozilla.org/en/docs/Accessible_DH TML• UIUC tests - http://test.cita.uiuc.edu/aria• Live regions - http://accessibleajax.clcworld.net• A List Apart - http://alistapart.com/articles/waiaria• IBM - http://www.csun.edu/cod/conf/2005/proceedings/2 524.htm• Webaim - http://webaim.org/
  41. 41. Thanks to WAI
  42. 42. But
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×