aria_with_kissy
Post on 12-Sep-2014
1.635 views
DESCRIPTION
TRANSCRIPT
![Page 2: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/2.jpg)
• WAI ARIA Introduction
• ARIA Essentials
• ARIA with KISSY
![Page 3: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/3.jpg)
• WAI ARIA Introduction
![Page 4: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/4.jpg)
• W
• A
• I
• A
• R
• I
• A
WAI ARIA Intro
![Page 5: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/5.jpg)
• Web
• Accessibility
• Initiative
• Accessible
• Rich
• Internet
• Application
WAI ARIA Intro
![Page 6: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/6.jpg)
• Web >= 2.0 is fancy !
Problem
![Page 7: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/7.jpg)
What can we do for the disabled especially blind men ?
![Page 8: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/8.jpg)
• MSAA : Microsoft Active Accessibility
MS already does
![Page 9: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/9.jpg)
• Accessibility Programming Guidelines for Cocoa
Mac also does
![Page 10: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/10.jpg)
• Map ARIA attributes to MSAA properties.
• Now in draft , but de facto standard , largely supported
ARIA comes for web
![Page 11: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/11.jpg)
• Semantic tag with meaning content
• But not enough for complex app
How
html
![Page 12: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/12.jpg)
• Enhance usability for common people
• But not so useful for disabled
How
html
css
![Page 13: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/13.jpg)
• Fancy thing comes
• But it does not tell disabled
How
html
css
javascript
![Page 14: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/14.jpg)
• Aria for rescue
• More semantics by providing attribute to bridge the gap between App and AT.
How
html
css
javascript
ARIA
![Page 15: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/15.jpg)
• Aria essentials
![Page 16: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/16.jpg)
• 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
![Page 17: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/17.jpg)
• Document structure
• Landmarks
• Widget role
Role category
![Page 18: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/18.jpg)
• 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
![Page 19: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/19.jpg)
• Document structure roles in taobao
Role=‘list’
role=‘listitem’
![Page 20: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/20.jpg)
• 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
![Page 21: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/21.jpg)
In taobao
• word count notification
id=‘counter’ aria-live=‘polite’
aria-controls=‘counter’
![Page 22: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/22.jpg)
• Navigational regions , need AT’s navigation function.
• Contains :
application banner complementary contentinfo form main navigation search
Landmark roles
![Page 23: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/23.jpg)
Landmark roles in taobao
![Page 24: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/24.jpg)
Landmark in taobao
role=‘contentinfo’
![Page 25: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/25.jpg)
• 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
![Page 26: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/26.jpg)
Widget roles in taobao
![Page 27: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/27.jpg)
• 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
![Page 28: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/28.jpg)
• 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
![Page 29: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/29.jpg)
In taobao
aria-activedescendant
aria-hidden
Now : aria-label aria-haspopup @ etao
Lack : aria-activedescendant aria-hidden
![Page 30: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/30.jpg)
• 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
![Page 31: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/31.jpg)
• Aria with KISSY
![Page 32: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/32.jpg)
• KISSY.Overlay
• KISSY.MenuButton
• KISSY.Tabs
• KISSY.Carousel
• …..
overview
![Page 33: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/33.jpg)
• role=‘dialog’
• aria-labelledby
• aria-hidden
• Trapping Focus
KISSY.Overlay
![Page 34: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/34.jpg)
• role = ‘button’
• aria-haspopup aria-expanded
• aria-pressed aria-disabled
• aria-activedescendant
• aria-labelledby
KISSY.MenuButton
![Page 35: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/35.jpg)
• role = ‘menu’ / ‘menuitem’
• aria-haspopup
• aria-activedescendant
• aria-disabled aria-pressed
KISSY.Menu
![Page 36: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/36.jpg)
• Aria in KISSY.Tabs
Tabs Transform
![Page 37: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/37.jpg)
• 1. Pick role
– Role=‘tablist’
– Role=‘tab’
– Role=‘tabpanel’
KISSY.Tabs practice
![Page 38: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/38.jpg)
• 2. set state/property and tabindex
– Tabpanel
• aria-hidden
• aria-labelledby
– Tab
• tabindex , current active = 0 , others = -1
•
![Page 39: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/39.jpg)
• 3.establish keyboard
navigation
– Keyboard accessible tab
by listening keydown/press
![Page 40: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/40.jpg)
• 4.sync states with
widget logic
5.tabindex and
focus management
– AOP Event-Driven
![Page 41: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/41.jpg)
• Waiting ….
More
![Page 42: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/42.jpg)
• 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
![Page 43: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/43.jpg)
• 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
![Page 44: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/44.jpg)
• 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
![Page 45: aria_with_kissy](https://reader034.vdocument.in/reader034/viewer/2022051411/541306e78d7f72174e8b466a/html5/thumbnails/45.jpg)
Thanks to WAI