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

何一鸣:【无障碍访问】Aria in taobao

on

  • 6,161 views

 

Statistics

Views

Total Views
6,161
Views on SlideShare
2,099
Embed Views
4,062

Actions

Likes
3
Downloads
53
Comments
0

10 Embeds 4,062

http://www.d2forum.org 4037
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    何一鸣:【无障碍访问】Aria in taobao 何一鸣:【无障碍访问】Aria in taobao Presentation Transcript

    • ARIA with TaoBao 承玉@淘宝 yiminghe@gmail.com
    • 起于”投诉”• 发布页面编辑器更新,控制了焦点
    • • 1. WCAG• 2.语音验证码研究• 3.无障碍实验室• 4.社会责任部的关注
    • • WAI ARIA 简介• ARIA 基础• ARIA 淘宝实践
    • 问题
    • 问题盲人需要 AT (可访问性工具)
    • 问题• 但更需要的是”盲道”
    • 现实• 你的网站 ”提供” 了么?
    • • WAI ARIA 简介
    • WAI ARIA 简介• W• A• I• A• R• I• A
    • WAI ARIA 简介• Web• Accessibility• Initiative• Accessible• Rich• Internet• Application
    • How• ARIA : web app 与 AT(可访问性工具) 的桥梁. ARIA javascript css html
    • • ARIA 基础
    • ARIA 基础• Role : 描述区域作用或组件类型。侧重语义 信息.• State/property : 描述状态与属性.• keydown + tabIndex
    • role
    • State/property
    • 国外
    • 国外
    • ARIA with TaoBao• 首页实践
    • 路标角色
    • 吊顶 ARIAaria-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• …..
    • KISSY.Overlay• role=‘dialog’• aria-labelledby• aria-hidden• 捕获焦点
    • Overlay demo
    • KISSY.MenuButton• role = ‘button’• aria-haspopup aria-expanded• aria-pressed aria-disabled• aria-activedescendant• aria-labelledby
    • KISSY.Menu• role = ‘menu’ / ‘menuitem’• aria-haspopup• aria-activedescendant• aria-disabled aria-pressed
    • 基础架构• MVC 分层 : ARIA -> View Controller 1 -model : Model -view : View +onClick() 1 +onKeydown() 1 1 View Model -el -data +onClick() +getValue() -updateHtml() +setValue() -updateClass() -updateAria()
    • Tabs Transform• ARIA in KISSY.Tabs
    • KISSY.Tabs practice• 1. 挑选合适的角色 – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
    • • 2. 设置 aria 状态(属性)的初始值 – Tabpanel • aria-hidden • aria-labelledby – Tab • tabindex , current active = 0 , others = -1
    • • 3. 绑定键盘事件,转移逻辑状态. – keydown / keypress
    • • 4. 同组件逻辑状态与 aria 状态(属性)并设置焦点. – AOP Event-Driven
    • ARIA问题• 兼容性问题:读屏器*浏览器• ARIA 组件交互规范数量不足
    • 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/
    • 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
    • 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/
    • Thanks to WAI
    • But