Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WAI-ARIA

othree
September 26, 2011

 WAI-ARIA

COSCUP 2011

othree

September 26, 2011
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. 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
  2. Components of ARIA • role → browser knows meaning •

    states and properties → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes
  3. • role → browser knows meaning • states and properties

    → browser knows • redefine tabindex → possible to focus • liveregion → notice when content changes Mapping to Problems
  4. • 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
  5. • 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
  6. • 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
  7. • 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
  8. Role, role of element • alert • button • checkbox

    • dialog • link • menuitem • scrollbar • slider • tab • timer • tooltip • ...
  9. Document Structure Landmark • article • heading • img •

    list • note • presentation • banner • complementary • contentinfo • main • navigation • search
  10. Difference ARIA ARIA HTML5 HTML5 banner Banner for entire site

    <header> Head of section main Main content of page <article> An article
  11. Store Methods • Use DOM Node property • Use custom

    class • Use custom attribute • Use Widget controller • Use centralized storage system
  12. ?

  13. ? ?

  14. 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>
  15. 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>
  16. Redefine Tabindex • Available for all visible elements • Three

    values • > 0 • 0 → • -1 → • 0 → in native order
  17. Redefine Tabindex • Available for all visible elements • Three

    values • > 0 • 0 → • -1 → • 0 → in native order • -1 → need .focus()
  18. Standard Way to Store Property & State • Avoid pollute

    DOM Node & className • Build relationship between nodes