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

6,411 views
6,243 views

Published on

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

No Downloads
Views
Total views
6,411
On SlideShare
0
From Embeds
0
Number of Embeds
4,065
Actions
Shares
0
Downloads
56
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

何一鸣:【无障碍访问】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

×