Your SlideShare is downloading. ×
aria_with_kissy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

aria_with_kissy

1,276
views

Published on

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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