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

ARIA with TaoBao

承玉@淘宝

yiminghe@gmail.com

起于”投诉”

• 发布页面编辑器更新，控制了焦点

• 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