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

  • 5,825 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,825
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
55
Comments
0
Likes
3

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. ARIA with TaoBao 承玉@淘宝 yiminghe@gmail.com
  • 2. 起于”投诉”• 发布页面编辑器更新,控制了焦点
  • 3. • 1. WCAG• 2.语音验证码研究• 3.无障碍实验室• 4.社会责任部的关注
  • 4. • WAI ARIA 简介• ARIA 基础• ARIA 淘宝实践
  • 5. 问题
  • 6. 问题盲人需要 AT (可访问性工具)
  • 7. 问题• 但更需要的是”盲道”
  • 8. 现实• 你的网站 ”提供” 了么?
  • 9. • WAI ARIA 简介
  • 10. WAI ARIA 简介• W• A• I• A• R• I• A
  • 11. WAI ARIA 简介• Web• Accessibility• Initiative• Accessible• Rich• Internet• Application
  • 12. How• ARIA : web app 与 AT(可访问性工具) 的桥梁. ARIA javascript css html
  • 13. • ARIA 基础
  • 14. ARIA 基础• Role : 描述区域作用或组件类型。侧重语义 信息.• State/property : 描述状态与属性.• keydown + tabIndex
  • 15. role
  • 16. State/property
  • 17. 国外
  • 18. 国外
  • 19. ARIA with TaoBao• 首页实践
  • 20. 路标角色
  • 21. 吊顶 ARIAaria-haspopup aria-label role=‘menu’ aria-hidden=‘false’1. Tab 到顶部导航链接2. 在链接上键盘右键弹出当前链接子菜单3. Tab 继续在当前子菜单导航4. Esc 关闭子菜单回到当前链接
  • 22. Search tab ARIA
  • 23. 右侧区域 ARIA
  • 24. demo
  • 25. • KISSY 的一些尝试
  • 26. 组件级别• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
  • 27. KISSY.Overlay• role=‘dialog’• aria-labelledby• aria-hidden• 捕获焦点
  • 28. Overlay demo
  • 29. KISSY.MenuButton• role = ‘button’• aria-haspopup aria-expanded• aria-pressed aria-disabled• aria-activedescendant• aria-labelledby
  • 30. KISSY.Menu• role = ‘menu’ / ‘menuitem’• aria-haspopup• aria-activedescendant• aria-disabled aria-pressed
  • 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. Tabs Transform• ARIA in KISSY.Tabs
  • 33. KISSY.Tabs practice• 1. 挑选合适的角色 – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
  • 34. • 2. 设置 aria 状态(属性)的初始值 – Tabpanel • aria-hidden • aria-labelledby – Tab • tabindex , current active = 0 , others = -1
  • 35. • 3. 绑定键盘事件,转移逻辑状态. – keydown / keypress
  • 36. • 4. 同组件逻辑状态与 aria 状态(属性)并设置焦点. – AOP Event-Driven
  • 37. ARIA问题• 兼容性问题:读屏器*浏览器• ARIA 组件交互规范数量不足
  • 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. 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. 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. Thanks to WAI
  • 42. But