ARIA in taobao
Upcoming SlideShare
Loading in...5
×
 

ARIA in taobao

on

  • 1,396 views

 

Statistics

Views

Total Views
1,396
Views on SlideShare
1,396
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

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• http://www.flickr.com/photos/yiminghe/5949 241487/in/set-72157627232043654/
    • • KISSY 的一些尝试
    • 组件级别• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
    • KISSY.Overlay• role=‘dialog’• aria-labelledby• aria-hidden• 捕获焦点
    • demo• http://www.flickr.com/photos/yiminghe/5949 799426/in/set-72157627232043654/
    • 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
    • demo• http://www.flickr.com/photos/yiminghe/5949 800438/in/set-72157627232043654/
    • 基础架构• 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