1. ARIA with TaoBao
承玉@淘宝
yiminghe@gmail.com

2. 起于”投诉”
• 发布页面编辑器更新，控制了焦点

3. • 1. WCAG
• 2.语音验证码研究
• 3.无障碍实验室
• 4.社会责任部的关注

5. • WAI ARIA 简介
• ARIA 基础
• ARIA 淘宝实践

6. 问题

7. 问题
盲人需要 AT （可访问性工具）

8. 问题
• 但更需要的是”盲道”

9. 现实
• 你的网站 ”提供” 了么？

10. • WAI ARIA 简介

11. WAI ARIA 简介
• W
• A
• I
• A
• R
• I
• A

12. WAI ARIA 简介
• Web
• Accessibility
• Initiative
• Accessible
• Rich
• Internet
• Application

13. How
• ARIA : web app 与 AT(可访问性工具) 的桥梁.
ARIA
javascript
css
html

14. • ARIA 基础

15. ARIA 基础
• Role : 描述区域作用或组件类型。侧重语义
信息.
• State/property : 描述状态与属性.
• keydown + tabIndex

16. role

17. State/property

18. 国外

19. 国外

22. ARIA with TaoBao
• 首页实践

23. 路标角色

24. 吊顶 ARIA
aria-haspopup aria-label role=‘menu’ aria-hidden=‘false’
1. Tab 到顶部导航链接
2. 在链接上键盘右键弹出当前链接子菜单
3. Tab 继续在当前子菜单导航
4. Esc 关闭子菜单回到当前链接

25. Search tab ARIA

26. 右侧区域 ARIA

27. demo
• http://www.flickr.com/photos/yiminghe/5949
241487/in/set-72157627232043654/

28. • KISSY 的一些尝试

29. 组件级别
• KISSY.Overlay
• KISSY.MenuButton
• KISSY.Tabs
• KISSY.Carousel
• …..

30. KISSY.Overlay
• role=‘dialog’
• aria-labelledby
• aria-hidden
• 捕获焦点

31. demo
• http://www.flickr.com/photos/yiminghe/5949
799426/in/set-72157627232043654/

32. KISSY.MenuButton
• role = ‘button’
• aria-haspopup aria-expanded
• aria-pressed aria-disabled
• aria-activedescendant
• aria-labelledby

33. KISSY.Menu
• role = ‘menu’ / ‘menuitem’
• aria-haspopup
• aria-activedescendant
• aria-disabled aria-pressed

34. demo
• http://www.flickr.com/photos/yiminghe/5949
800438/in/set-72157627232043654/

35. 基础架构
• MVC 分层 : ARIA -> View
Controller
1
-model : Model
-view : View
+onClick() 1
+onKeydown()
1
1
View
Model -el
-data +onClick()
+getValue() -updateHtml()
+setValue() -updateClass()
-updateAria()

36. Tabs Transform
• ARIA in KISSY.Tabs

37. KISSY.Tabs practice
• 1. 挑选合适的角色
– Role=‘tablist’
– Role=‘tab’
– Role=‘tabpanel’

38. • 2. 设置 aria 状态(属性)的初始值
– Tabpanel
• aria-hidden
• aria-labelledby
– Tab
• tabindex , current active = 0 , others = -1

39. • 3. 绑定键盘事件，转移
逻辑状态.
– keydown / keypress

40. • 4. 同组件逻辑状态
与 aria 状态(属性)
并设置焦点.
– AOP Event-Driven

41. ARIA问题
• 兼容性问题：读屏器*浏览器
• ARIA 组件交互规范数量不足

42. 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/

43. 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 Lemon's tutorial -
dev.opera.com/articles/view/introduction-to-wai-
aria/
• Codetalks - http://wiki.codetalks.org

44. 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/

45. Thanks to WAI

46. But