Your SlideShare is downloading. ×
0
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
WAI-ARIA is More Than Accessibility
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

WAI-ARIA is More Than Accessibility

3,632

Published on

WAI-ARIA talk at COSCUP 2011, License CC-BY

WAI-ARIA talk at COSCUP 2011, License CC-BY

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

No Downloads
Views
Total Views
3,632
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
6
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. WAI-ARIA is morethan Accessibility othree @ COSCUP 2011
    • 2. Who am IMember of Happy Designer MozTW HTML5-IG-ZH Work PhD Candidate on Civil F2E at HTC
    • 3. The History
    • 4. Web 2.0
    • 5. Age ofRich Internet Applications RIA
    • 6. Custom Widgets
    • 7. AJAX
    • 8. Problems• Custom Widgets • No Semantic, Browser/AT didn’t realize • Can’t get focus
    • 9. Problem• AJAX • AT didn’t know when the content changes, and where is it.
    • 10. WAI-ARIA
    • 11. WAI-ARIA• Proposed by Richard Schwerdtfeger from IBM and Becky Gibson from W3C• W3C Candidate Recommendation at 2011/01/18• You can use it TODAY http://www.alistapart.com/articles/waiaria
    • 12. Components of ARIA• role → browser knows meaning• states and properties → browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 13. Mapping to Problems• role → browser knows meaning• states and properties → browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 14. Mapping to Problems• role → define new rolesmeaning browser knows• states and properties → browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 15. Mapping to Problems• role → define new rolesmeaning browser knows• states and properties → store states browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 16. Mapping to Problems• role → define new rolesmeaning browser knows• states and properties → store states browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 17. Mapping to Problems• role → define new rolesmeaning browser knows• states and properties → store states browser knows• redefine tabindex → possible to focus• liveregion → notice when content changes
    • 18. Role
    • 19. Role, role of element• alert • scrollbar• button • slider• checkbox • tab• dialog • timer• link • tooltip• menuitem • ...
    • 20. Slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 21. Slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 22. Role, more than widget• Widgets Roles• Document Structure• Landmark
    • 23. Document Structure Landmark• article • banner• heading • complementary• img • contentinfo• list • main• note • navigation• presentation • search
    • 24. HTML5 Semantic Tag <header> <nav> <aside> <article>
    • 25. ARIA Document Structure banner navigation complementary main
    • 26. Difference ARIA HTML5 Banner forbanner <header> Head of section entire site Main content ofmain <article> An article page
    • 27. HTML5 + ARIA <div role=”banner”> <nav><div role=”main”> <aside> <article></div>
    • 28. ARIA can helpHTML5 document more semantic
    • 29. States & Properties
    • 30. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a></div>
    • 31. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a></div>
    • 32. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a></div>
    • 33. Store Methods• Use DOM Node property• Use custom class• Use custom attribute• Use Widget controller• Use centralized storage system
    • 34. ARIA slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 35. ARIA slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 36. ARIA slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 37. ARIA slider<span tabindex="0" role="slider" aria-valuenow="33" aria-valuemin="0" aria-valuemax="50" id="slider1" title="My slider" onkeydown="return handleSliderKey(this, event)"> --</span>
    • 38. Also for Relationships• label, describe• owns, controlls
    • 39. ?
    • 40. ? ?
    • 41. label, describe<a href="http://yahoo.com" id="yahoo-link-2" aria-describedby="tooltip">Link to yahoo1</a>...<div id="tooltip" aria-labelledby="yahoo-link-2"> <h3>Yahoo doo2</h3> <div class="body">wohooo</div> <div class="url" style="display: none; "></div></div>
    • 42. label, describe<a href="http://yahoo.com" id="yahoo-link-2" aria-describedby="tooltip">Link to yahoo1</a>...<div id="tooltip" aria-labelledby="yahoo-link-2"> <h3>Yahoo doo2</h3> <div class="body">wohooo</div> <div class="url" style="display: none; "></div></div>
    • 43. Live Region
    • 44. Live Region• Monitor DOM change• How? • aria-live=”polite”
    • 45. Polite Level• off• polite• assertive• rude
    • 46. Tabindex
    • 47. Redefine Tabindex• Available for all visible elements• Three values • >0 • 0→ • -1 →
    • 48. Redefine Tabindex• Available for all visible elements• Three values • >0 • 0 → in native order • -1 →
    • 49. Redefine Tabindex• Available for all visible elements• Three values • >0 • 0 → in native order • -1 → need .focus()
    • 50. ←START
    • 51. 1 Tab Order2 3 4 5 67...
    • 52. 1 Ideal Tab Order23
    • 53. Move to Other Tab→
    • 54. Move to Other Tab← →
    • 55. Tabindex Value0 -1 -1 -1 -1
    • 56. Tabindex Value-1 0 -1 -1 -1
    • 57. Not automatically
    • 58. More than Accessibility
    • 59. SEO• Document Structure & Landmark Role • Yahoo! supports • Google use role too
    • 60. Standard Way to Store Property & State• Avoid pollute DOM Node & className• Build relationship between nodes
    • 61. Use WAI-ARIA Today!!
    • 62. Thank You
    • 63. Questions?

    ×