何一鸣:【无障碍访问】Aria in taobao
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
6,355
On Slideshare
2,293
From Embeds
4,062
Number of Embeds
10

Actions

Shares
Downloads
55
Comments
0
Likes
3

Embeds 4,062

http://www.d2forum.org 4,037
http://www.itfeed.cn 9
http://cache.baidu.com 8
http://reader.youdao.com 2
http://www.d2forum.org} {867205870|||pingback 1
http://webcache.googleusercontent.com 1
http://www.d2forum.org} {1083066166|||pingback 1
http://www.d2forum.org} {218109639|||pingback 1
http://www.d2forum.org} {180554655|||pingback 1
http://www.chengxuyuans.com 1

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