More Related Content
Similar to ARIA in taobao (19)
ARIA in taobao
- 12. WAI ARIA 简介
• Web
• Accessibility
• Initiative
• Accessible
• Rich
• Internet
• Application
- 13. How
• ARIA : web app 与 AT(可访问性工具) 的桥梁.
ARIA
javascript
css
html
- 15. ARIA 基础
• Role : 描述区域作用或组件类型。侧重语义
信息.
• State/property : 描述状态与属性.
• keydown + tabIndex
- 24. 吊顶 ARIA
aria-haspopup aria-label role=‘menu’ aria-hidden=‘false’
1. Tab 到顶部导航链接
2. 在链接上键盘右键弹出当前链接子菜单
3. Tab 继续在当前子菜单导航
4. Esc 关闭子菜单回到当前链接
- 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
- 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()
- 38. • 2. 设置 aria 状态(属性)的初始值
– Tabpanel
• aria-hidden
• aria-labelledby
– Tab
• tabindex , current active = 0 , others = -1
- 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/