aria_with_kissy

ARIA with KISSY

承玉yiminghe@gmail.com

Draft 26 May 2011

• WAI ARIA Introduction

• ARIA Essentials

• ARIA with KISSY

• WAI ARIA Introduction

• W

• A

• I

• A

• R

• I

• A

WAI ARIA Intro

• Web

• Accessibility

• Initiative

• Accessible

• Rich

• Internet

• Application

WAI ARIA Intro

• Web >= 2.0 is fancy !

Problem

What can we do for the disabled especially blind men ?

• MSAA : Microsoft Active Accessibility

MS already does

• Accessibility Programming Guidelines for Cocoa

Mac also does

• Map ARIA attributes to MSAA properties.

• Now in draft , but de facto standard , largely supported

ARIA comes for web

• Semantic tag with meaning content

• But not enough for complex app

How

html

• Enhance usability for common people

• But not so useful for disabled

How

html

css

• Fancy thing comes

• But it does not tell disabled

How

html

css

javascript

• Aria for rescue

• More semantics by providing attribute to bridge the gap between App and AT.

How

html

css

javascript

ARIA

• Aria essentials

• Role : type of ui component ,add semantics

• State/Property : decribe about specific role’s attribute

• Tabindex : focus management , control user’s navigation

• Keydown/press : event needed to be listened for activate actions

ARIA essentials

• Document structure

• Landmarks

• Widget role

Role category

• Organize content in a page ,not usually interactive. Similar to html5 tags .

• Contains :

article columnheader definition directory document group heading img list listitem math note presentation region row rowheader separator toolbar

Document structure Roles

• Document structure roles in taobao

Role=‘list’

role=‘listitem’

• Managing content and presentation changes

• Relation:

– aria-controls

• Properties

– aria-live aria-busy aria-atomic aria-relevent

• Special live region

– alert status timer marquee log

Live region

In taobao

• word count notification

id=‘counter’ aria-live=‘polite’

aria-controls=‘counter’

• Navigational regions , need AT’s navigation function.

• Contains :

application banner complementary contentinfo form main navigation search

Landmark roles

Landmark roles in taobao

Landmark in taobao

role=‘contentinfo’

• Type of a standalone widget or ui control like on desktop.

• Contains :

alert button dialog gridcell marquee menuitem menuitemcheckbox menuitemradio option progressbar scrollbar slider spinbutton tab tabpanel timer tooltip treeitem combobox grid listbox menu menubar radiogroup tablist tree …

Widget roles

Widget roles in taobao

• hint:

– Keydown on Roles other an ‘application’ or widget role will be intercepted by AT.

– Keydown event fired on element with widget role should call stopPropagation and preventDefault in order to let web application to handle it.

Role and keydown

• Belongs to specific roles ,name starts with “aria-”

• For example :

aria-label aria-labelledby aria-live aria-hidden aria-activedescendant aria-haspopup aria-controls …

States/property

In taobao

aria-activedescendant

aria-hidden

Now : aria-label aria-haspopup @ etao

Lack : aria-activedescendant aria-hidden

• Manage focus among dom node

tabindex

Attribute Tabindex Focusable with mouse or JavaScript via element.focus()

Tab Navigation

not present Follows default behavior of element (only form controls and anchors can receive focus.)

Follows default behavior of element

zero - tabindex="0" yes In tab order relative to element's position in document

Positive - tabindex="X" (where X is a positive integer between 1 and 32768)

yes Tabindex value directly specifies where this element is positioned in the tab order.

Negative - tabindex="-1" yes No, author must focus it with element.focus() as a result of arrow or other key press

• Aria with KISSY

• KISSY.Overlay

• KISSY.MenuButton

• KISSY.Tabs

• KISSY.Carousel

• …..

overview

• role=‘dialog’

• aria-labelledby

• aria-hidden

• Trapping Focus

KISSY.Overlay

• 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

• Aria in KISSY.Tabs

Tabs Transform

• 1. Pick role

– Role=‘tablist’

– Role=‘tab’

– Role=‘tabpanel’

KISSY.Tabs practice

• 2. set state/property and tabindex

– Tabpanel

• aria-hidden

• aria-labelledby

– Tab

• tabindex , current active = 0 , others = -1

•

• 3.establish keyboard

navigation

– Keyboard accessible tab

by listening keydown/press

• 4.sync states with

widget logic

5.tabindex and

focus management

– AOP Event-Driven

• Waiting ….

More

• 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