aria_with_kissy
Post on 12-Sep-2014
1.636 views
DESCRIPTION
TRANSCRIPT
• 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