WAI-ARIA

COSCUP 2011

Transcript

1. WAI-ARIA is more than Accessibility othree @ COSCUP 2011
2. Who am I Member of Happy Designer MozTW HTML5-IG-ZH Work PhD Candidate on Civil F2E at HTC
3. The History
4. Web 2.0
5. Age of RIA Rich Internet Applications
6. Custom Widgets
12. AJAX
16. Problems • Custom Widgets • No Semantic, Browser/AT didn’t realize • Can’t get focus
21. Problem • AJAX • AT didn’t know when the content changes, and where is it.
22. WAI-ARIA
23. 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
24. Components of ARIA • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes
25. • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes Mapping to Problems
26. • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes • role → define new roles Mapping to Problems
27. • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes • role → define new roles • states and properties → store states Mapping to Problems
28. • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes • role → define new roles • states and properties → store states • redefine tabindex → possible to focus Mapping to Problems
29. • role → browser knows meaning • states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes • role → define new roles • states and properties → store states • redefine tabindex → possible to focus • liveregion → notice when content changes Mapping to Problems
30. Role
31. Role, role of element • alert • button • checkbox • dialog • link • menuitem • scrollbar • slider • tab • timer • tooltip • ...
33. 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>
34. 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. Role, more than widget • Widgets Roles • Document Structure • Landmark
36. Document Structure Landmark • article • heading • img • list • note • presentation • banner • complementary • contentinfo • main • navigation • search
37. <header> <article> <aside> HTML5 Semantic Tag <nav>
38. banner main complementary ARIA Document Structure navigation
39. Difference ARIA ARIA HTML5 HTML5 banner Banner for entire site <header> Head of section main Main content of page <article> An article
40. <div role=”banner”> <div role=”main”> <article> </div> <aside> HTML5 + ARIA <nav>
41. ARIA can help HTML5 document more semantic
42. States & Properties
44. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a> </div>
45. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a> </div>
46. <div id="master" style=".." class=".."> <div class=".." style="width: 60%;"></div> <a class=".." href="#" style="left: 60%;"></a> </div>
47. Store Methods • Use DOM Node property • Use custom class • Use custom attribute • Use Widget controller • Use centralized storage system
48. 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>
49. 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>
50. 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>
51. 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>
52. Also for Relationships • label, describe • owns, controlls
55. ?
56. ? ?
57. 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>
58. 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>
59. Live Region
60. Live Region • Monitor DOM change • How? • aria-live=”polite”
61. Polite Level • off • polite • assertive • rude
62. Tabindex
63. Redefine Tabindex • Available for all visible elements • Three values • > 0 • 0 → • -1 →
64. Redefine Tabindex • Available for all visible elements • Three values • > 0 • 0 → • -1 → • 0 → in native order
65. Redefine Tabindex • Available for all visible elements • Three values • > 0 • 0 → • -1 → • 0 → in native order • -1 → need .focus()
67. ←START
68. 1 2 3 4 5 6 7... Tab Order
69. 1 2 3 Ideal Tab Order
70. → Move to Other Tab
71. ← → Move to Other Tab
73. 0 -1 -1 -1 -1 Tabindex Value
74. -1 0 -1 -1 -1 Tabindex Value
75. Not automatically
76. More than Accessibility
77. SEO • Document Structure & Landmark Role • Yahoo! supports • Google use role too
78. Standard Way to Store Property & State • Avoid pollute DOM Node & className • Build relationship between nodes
79. Use WAI-ARIA Today!!
80. Thank You
81. Questions?