ARIA with KISSY                       承玉        yiminghe@gmail.com          Draft 17 May 2011
• WAI ARIA Introduction• ARIA Essentials• ARIA with KISSY
• WAI ARIA Introduction
WAI ARIA Intro• W• A• I•   A•   R•   I•   A
WAI ARIA Intro• Web• Accessibility• Initiative•   Accessible•   Rich•   Internet•   Application
Problem• Web >= 2.0 is fancy !
What can we do for the disabled especially blind men ?
MS already does• MSAA : Microsoft Active Accessibility
Mac also does• Accessibility Programming Guidelines for  Cocoa
ARIA comes for web• Map ARIA attributes to MSAA properties.• Now in draft , but de facto standard , largely  supported
How• Semantic tag with meaning content                html• But not enough for complex app
How• Enhance usability for common people                  css                  html• But not so useful for disabled
How• Fancy thing comes                 javascript                    css                   html• But it does not tell disa...
How• Aria for rescue                    ARIA                javascript                    css                    html• Mor...
• Aria essentials
ARIA essentials• Role : type of ui component ,add semantics• State/Property : decribe about specific role’s  attribute• Ta...
Role category• Document structure• Landmarks• Widget role
Document structure Roles• Organize content in a page ,not usually  interactive. Similar to html5 tags .• Contains :  artic...
• Document structure roles in taobao                        role=‘listitem’                   Role=‘list’
Landmark roles• Navigational regions , need AT’s navigation  function.• Contains :  application banner complementary  cont...
Landmark roles in taobao
Landmark in taobao     role=‘contentinfo’
Widget roles• Type of a standalone widget or ui control like  on desktop.• Contains :  alert button dialog gridcell marque...
Widget roles in taobao
Role and keydown• hint:  – Keydown on Roles other an ‘application’ or    widget role will be intercepted by AT.  – Keydown...
States/property• Belongs to specific roles ,name starts with  “aria-”• For example :  aria-label   aria-labelledby aria-li...
In taobao  Now : aria-label aria-haspopup @ etao  Lack : aria-activedescendant aria-hidden       aria-activedescendant    ...
• Aria with KISSY
overview• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
KISSY.Overlay• Trapping Focus• role=‘dialog’• aria-labelledby• aria-hidden
KISSY.MenuButton•   role = ‘button’•   aria-haspopup aria-expanded•   aria-pressed aria-disabled•   aria-activedescendant•...
KISSY.Menu•   role = ‘menu’ / ‘menuitem’•   aria-haspopup•   aria-activedescendant•   aria-disabled aria-pressed
Tabs Transform• Aria in KISSY.Tabs
KISSY.Tabs practice• 1. Pick role  – Role=‘tablist’  – Role=‘tab’  – Role=‘tabpanel’
• 2. set state/property and tabindex  – Tabpanel     • aria-hidden     • aria-labelledby  – Tab     • tabindex , current a...
• 3.establish keyboardnavigation  – Keyboard accessible tab  by listening keydown/press
• 4.sync states with widget logic 5.tabindex and focus management  – AOP Event-Driven
More• Waiting ….
tools• Ie8,9 : http://windows.microsoft.com/en-  US/internet-explorer/products/ie/home• Firefox : http://www.mozilla.com/•...
Refer• WAI-ARIA - w3.org/TR/wai-aria• Overview - w3.org/WAI/intro/aria• ARIA Primer - www.w3.org/TR/waiaria-primer/• ARIA ...
refer• Mozilla -  http://developer.mozilla.org/en/docs/Accessible_DH  TML• UIUC tests - http://test.cita.uiuc.edu/aria• Li...
Thanks to WAI
aria_with_kissy
aria_with_kissy
aria_with_kissy
Upcoming SlideShare
Loading in...5
×

aria_with_kissy

1,351

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

aria_with_kissy

  1. 1. ARIA with KISSY 承玉 yiminghe@gmail.com Draft 17 May 2011
  2. 2. • WAI ARIA Introduction• ARIA Essentials• ARIA with KISSY
  3. 3. • WAI ARIA Introduction
  4. 4. WAI ARIA Intro• W• A• I• A• R• I• A
  5. 5. WAI ARIA Intro• Web• Accessibility• Initiative• Accessible• Rich• Internet• Application
  6. 6. Problem• Web >= 2.0 is fancy !
  7. 7. What can we do for the disabled especially blind men ?
  8. 8. MS already does• MSAA : Microsoft Active Accessibility
  9. 9. Mac also does• Accessibility Programming Guidelines for Cocoa
  10. 10. ARIA comes for web• Map ARIA attributes to MSAA properties.• Now in draft , but de facto standard , largely supported
  11. 11. How• Semantic tag with meaning content html• But not enough for complex app
  12. 12. How• Enhance usability for common people css html• But not so useful for disabled
  13. 13. How• Fancy thing comes javascript css html• But it does not tell disabled
  14. 14. How• Aria for rescue ARIA javascript css html• More semantics by providing attribute to bridge the gap between App and AT.
  15. 15. • Aria essentials
  16. 16. 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
  17. 17. Role category• Document structure• Landmarks• Widget role
  18. 18. Document structure Roles• 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
  19. 19. • Document structure roles in taobao role=‘listitem’ Role=‘list’
  20. 20. Landmark roles• Navigational regions , need AT’s navigation function.• Contains : application banner complementary contentinfo form main navigation search
  21. 21. Landmark roles in taobao
  22. 22. Landmark in taobao role=‘contentinfo’
  23. 23. Widget roles• 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 …
  24. 24. Widget roles in taobao
  25. 25. Role and keydown• 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.
  26. 26. States/property• Belongs to specific roles ,name starts with “aria-”• For example : aria-label aria-labelledby aria-live aria-hidden aria-activedescendant aria-haspopup aria-controls …
  27. 27. In taobao Now : aria-label aria-haspopup @ etao Lack : aria-activedescendant aria-hidden aria-activedescendant aria-hidden
  28. 28. • Aria with KISSY
  29. 29. overview• KISSY.Overlay• KISSY.MenuButton• KISSY.Tabs• KISSY.Carousel• …..
  30. 30. KISSY.Overlay• Trapping Focus• role=‘dialog’• aria-labelledby• aria-hidden
  31. 31. KISSY.MenuButton• role = ‘button’• aria-haspopup aria-expanded• aria-pressed aria-disabled• aria-activedescendant• aria-labelledby
  32. 32. KISSY.Menu• role = ‘menu’ / ‘menuitem’• aria-haspopup• aria-activedescendant• aria-disabled aria-pressed
  33. 33. Tabs Transform• Aria in KISSY.Tabs
  34. 34. KISSY.Tabs practice• 1. Pick role – Role=‘tablist’ – Role=‘tab’ – Role=‘tabpanel’
  35. 35. • 2. set state/property and tabindex – Tabpanel • aria-hidden • aria-labelledby – Tab • tabindex , current active = 0 , others = -1 •
  36. 36. • 3.establish keyboardnavigation – Keyboard accessible tab by listening keydown/press
  37. 37. • 4.sync states with widget logic 5.tabindex and focus management – AOP Event-Driven
  38. 38. More• Waiting ….
  39. 39. 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/
  40. 40. 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
  41. 41. 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/25 24.htm• Webaim - http://webaim.org/
  42. 42. Thanks to WAI
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×