何一鸣:【无障碍访问】aria in taobao
Post on 12-Sep-2014
55 views
DESCRIPTION
TRANSCRIPT
![Page 2: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/2.jpg)
起于”投诉”
• 发布页面编辑器更新,控制了焦点
![Page 3: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/3.jpg)
• 1. WCAG
• 2.语音验证码研究
• 3.无障碍实验室
• 4.社会责任部的关注
![Page 4: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/4.jpg)
![Page 5: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/5.jpg)
• WAI ARIA 简介
• ARIA 基础
• ARIA 淘宝实践
![Page 6: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/6.jpg)
问题
![Page 7: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/7.jpg)
问题盲人需要 AT (可访问性工具)
![Page 8: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/8.jpg)
• 但更需要的是”盲道”
问题
![Page 9: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/9.jpg)
• 你的网站 ”提供” 了么?
现实
![Page 10: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/10.jpg)
• WAI ARIA 简介
![Page 11: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/11.jpg)
• W
• A
• I
• A
• R
• I
• A
WAI ARIA 简介
![Page 12: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/12.jpg)
• Web
• Accessibility
• Initiative
• Accessible
• Rich
• Internet
• Application
WAI ARIA 简介
![Page 13: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/13.jpg)
• ARIA : web app 与 AT(可访问性工具) 的桥梁.
How
html
css
javascript
ARIA
![Page 14: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/14.jpg)
• ARIA 基础
![Page 15: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/15.jpg)
• Role : 描述区域作用或组件类型。侧重语义信息.
• State/property : 描述状态与属性.
• keydown + tabIndex
ARIA 基础
![Page 16: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/16.jpg)
role
![Page 17: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/17.jpg)
State/property
![Page 18: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/18.jpg)
国外
![Page 19: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/19.jpg)
国外
![Page 20: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/20.jpg)
![Page 21: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/21.jpg)
![Page 22: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/22.jpg)
• 首页实践
ARIA with TaoBao
![Page 23: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/23.jpg)
路标角色
![Page 24: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/24.jpg)
吊顶 ARIA
aria-haspopup aria-label role=‘menu’ aria-hidden=‘false’
1. Tab 到顶部导航链接2. 在链接上键盘右键弹出当前链接子菜单3. Tab 继续在当前子菜单导航4. Esc 关闭子菜单回到当前链接
![Page 25: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/25.jpg)
Search tab ARIA
![Page 26: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/26.jpg)
右侧区域 ARIA
![Page 27: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/27.jpg)
demo
![Page 28: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/28.jpg)
• KISSY 的一些尝试
![Page 29: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/29.jpg)
• KISSY.Overlay
• KISSY.MenuButton
• KISSY.Tabs
• KISSY.Carousel
• …..
组件级别
![Page 30: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/30.jpg)
• role=‘dialog’
• aria-labelledby
• aria-hidden
• 捕获焦点
KISSY.Overlay
![Page 31: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/31.jpg)
Overlay demo
![Page 32: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/32.jpg)
• role = ‘button’
• aria-haspopup aria-expanded
• aria-pressed aria-disabled
• aria-activedescendant
• aria-labelledby
KISSY.MenuButton
![Page 33: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/33.jpg)
• role = ‘menu’ / ‘menuitem’
• aria-haspopup
• aria-activedescendant
• aria-disabled aria-pressed
KISSY.Menu
![Page 34: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/34.jpg)
![Page 35: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/35.jpg)
• MVC 分层 : ARIA -> View
基础架构
+onClick()+onKeydown()
-model : Model-view : View
Controller
+getValue()+setValue()
-data
Model
+onClick()-updateHtml()-updateClass()-updateAria()
-el
View
1
1
1
1
![Page 36: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/36.jpg)
• ARIA in KISSY.Tabs
Tabs Transform
![Page 37: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/37.jpg)
• 1. 挑选合适的角色
– Role=‘tablist’
– Role=‘tab’
– Role=‘tabpanel’
KISSY.Tabs practice
![Page 38: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/38.jpg)
• 2. 设置 aria 状态(属性)的初始值
– Tabpanel
• aria-hidden
• aria-labelledby
– Tab
• tabindex , current active = 0 , others = -1
![Page 39: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/39.jpg)
• 3. 绑定键盘事件,转移
逻辑状态.
– keydown / keypress
![Page 40: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/40.jpg)
• 4. 同组件逻辑状态
与 aria 状态(属性)
并设置焦点.
– AOP Event-Driven
![Page 41: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/41.jpg)
• 兼容性问题:读屏器*浏览器
• ARIA 组件交互规范数量不足
ARIA问题
![Page 42: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/42.jpg)
• 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/
tools
![Page 43: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/43.jpg)
• 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
Refer
![Page 44: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/44.jpg)
• Mozilla -http://developer.mozilla.org/en/docs/Accessible_DHTML
• 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/2524.htm
• Webaim - http://webaim.org/
refer
![Page 45: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/45.jpg)
Thanks to WAI
![Page 46: 何一鸣:【无障碍访问】Aria in taobao](https://reader031.vdocuments.net/reader031/viewer/2022012316/5411e2527bef0a6a098b4955/html5/thumbnails/46.jpg)
But