何一鸣：【无障碍访问】Aria in taobao
46
-
date post
12-Sep-2014 -
Category
Technology
-
view
52 -
download
4
description
Transcript of 何一鸣：【无障碍访问】Aria in taobao
起于”投诉”
• 发布页面编辑器更新，控制了焦点
• 1. WCAG
• 2.语音验证码研究
• 3.无障碍实验室
• 4.社会责任部的关注
• WAI ARIA 简介
• ARIA 基础
• ARIA 淘宝实践
问题
问题盲人需要 AT （可访问性工具）
• 但更需要的是”盲道”
问题
• 你的网站 ”提供” 了么？
现实
• WAI ARIA 简介
• W
• A
• I
• A
• R
• I
• A
WAI ARIA 简介
• Web
• Accessibility
• Initiative
• Accessible
• Rich
• Internet
• Application
WAI ARIA 简介
• ARIA : web app 与 AT(可访问性工具) 的桥梁.
How
html
css
javascript
ARIA
• ARIA 基础
• Role : 描述区域作用或组件类型。侧重语义信息.
• State/property : 描述状态与属性.
• keydown + tabIndex
ARIA 基础
role
State/property
国外
国外
• 首页实践
ARIA with TaoBao
路标角色
吊顶 ARIA
aria-haspopup aria-label role=‘menu’ aria-hidden=‘false’
1. Tab 到顶部导航链接2. 在链接上键盘右键弹出当前链接子菜单3. Tab 继续在当前子菜单导航4. Esc 关闭子菜单回到当前链接
Search tab ARIA
右侧区域 ARIA
demo
• KISSY 的一些尝试
• KISSY.Overlay
• KISSY.MenuButton
• KISSY.Tabs
• KISSY.Carousel
• …..
组件级别
• role=‘dialog’
• aria-labelledby
• aria-hidden
• 捕获焦点
KISSY.Overlay
Overlay demo
• role = ‘button’
• aria-haspopup aria-expanded
• aria-pressed aria-disabled
• aria-activedescendant
• aria-labelledby
KISSY.MenuButton
• role = ‘menu’ / ‘menuitem’
• aria-haspopup
• aria-activedescendant
• aria-disabled aria-pressed
KISSY.Menu
• MVC 分层 : ARIA -> View
基础架构
+onClick()+onKeydown()
-model : Model-view : View
Controller
+getValue()+setValue()
-data
Model
+onClick()-updateHtml()-updateClass()-updateAria()
-el
View
1
1
1
1
• ARIA in KISSY.Tabs
Tabs Transform
• 1. 挑选合适的角色
– Role=‘tablist’
– Role=‘tab’
– Role=‘tabpanel’
KISSY.Tabs practice
• 2. 设置 aria 状态(属性)的初始值
– Tabpanel
• aria-hidden
• aria-labelledby
– Tab
• tabindex , current active = 0 , others = -1
• 3. 绑定键盘事件，转移
逻辑状态.
– keydown / keypress
• 4. 同组件逻辑状态
与 aria 状态(属性)
并设置焦点.
– AOP Event-Driven
• 兼容性问题：读屏器*浏览器
• ARIA 组件交互规范数量不足
ARIA问题
• 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
• 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
• 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
Thanks to WAI
But
