A Rock n Roll Guide to HTML5 & ARIA (Generate 2013)

4,273 views

Published on

An introduction to HTML5 and ARIA with practical design patterns.

Published in: Technology, Design
2 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
4,273
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
35
Comments
2
Likes
16
Embeds 0
No embeds

No notes for slide

A Rock n Roll Guide to HTML5 & ARIA (Generate 2013)

  1. 1. Rock n roll guide to HTML5 & ARIA Let's Do It, Joan Jett LJWatson.co.uk @LeonieWatson 1
  2. 2. Overview • Web accessibility stack • Accessible Rich Internet Applications (ARIA) • Details/summary design pattern • Main design pattern • Navigation design pattern • Section design pattern • Live region design pattern • Tab widget design pattern LJWatson.co.uk @LeonieWatson 2
  3. 3. Web accessibility stack Stairway to Heaven, Led Zeppelin LJWatson.co.uk @LeonieWatson 3
  4. 4. Layers of the stack • Assistive technologies (AT) • Accessibility APIs • Accessible Rich Internet Applications (ARIA) • Document Object Model (DOM) LJWatson.co.uk @LeonieWatson 4
  5. 5. Accessible Rich Internet Applications (ARIA) It’s a Kind of Magic, Queen LJWatson.co.uk @LeonieWatson 5
  6. 6. Roles • More than 30 ARIA roles • Including alert, dialog, checkbox, menubar,progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 6
  7. 7. States • 9 ARIA states. • Including aria-busy, aria-checked, aria- disabled, aria-hidden, aria-invalid and aria- selected LJWatson.co.uk @LeonieWatson 7
  8. 8. Properties • More than 20 ARIA properties • Including aria-activedescendent, aria-controls, aria-describedby, aria-label, aria-live and aria- required LJWatson.co.uk @LeonieWatson 8
  9. 9. Tabindex • Elements with tabindex="0" fit into natural tab order • Elements with tabindex="-1" can be focused programmatically • Elements with tabindex=">0" are a bad idea LJWatson.co.uk @LeonieWatson 9
  10. 10. Details/summary design pattern Learning to Fly, Pink Floyd LJWatson.co.uk @LeonieWatson 10
  11. 11. HTML5 <details> <summary>Favourite Pink Floyd</summary> … </details> LJWatson.co.uk @LeonieWatson 11
  12. 12. HTML5 + ARIA roles <details role="group"> <summary role=“button"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 12
  13. 13. HTML5 + ARIA states <details role="group"> <summary role=“button“ aria-expanded="true"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 13
  14. 14. Main page design pattern Solid Gold Easy Action, T.Rex LJWatson.co.uk @LeonieWatson 14
  15. 15. HTML4 <div id="header"> … </div> <div id="main"> … </div> <div id="footer"> … </div> LJWatson.co.uk @LeonieWatson 15
  16. 16. HTML4 + ARIA landmarks <div role="banner"> … </div> <div role="main"> … </div> <div role="contentinfo"> … </div> LJWatson.co.uk @LeonieWatson 16
  17. 17. HTML5 <header> … </header> <main> … </main> <footer> … </footer> LJWatson.co.uk @LeonieWatson 17
  18. 18. HTML5 + ARIA landmarks <header role="banner"> … </header> <main role="main"> … </main> <footer role="contentinfo"> … </footer> LJWatson.co.uk @LeonieWatson 18
  19. 19. HTML5 + ARIA landmarks exception <main role="main“ <article role="article"> <header…</header> … <footer>…</footer> </article> </main> LJWatson.co.uk @LeonieWatson 19
  20. 20. Navigation design pattern Walk This Way, Aerosmith LJWatson.co.uk @LeonieWatson 20
  21. 21. HTML5 + bad ARIA <nav> <ul role="navigation"> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 21
  22. 22. HTML5 + good ARIA <nav role="navigation"> <ul> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 22
  23. 23. Section design pattern All Right Now, Free LJWatson.co.uk @LeonieWatson 23
  24. 24. HTML5 <section> <h1>Back to black</h1> ... </section> LJWatson.co.uk @LeonieWatson 24
  25. 25. HTML5 + ARIA <section aria-labelledby="heading"> <h1 id="heading">Back to black</h1> ... </section> LJWatson.co.uk @LeonieWatson 25
  26. 26. Live region design pattern Atomic, Blondie LJWatson.co.uk @LeonieWatson 26
  27. 27. HTML5 <div> <h1>Tequila</h1> <button>Add to basket</button> </div> <div> <h2>Basket summary</h2> <p> Your basket contains <span id="quantity">0</span> items.</p> </div> LJWatson.co.uk @LeonieWatson 27
  28. 28. HTML5 + ARIA <div> <h2>Basket summary</h2> <div aria-live="assertive" aria-atomic="true"<p> Your basket contains <span id="quantity">0</span> items.</p> </div> LJWatson.co.uk @LeonieWatson 28
  29. 29. Tabbed widget design pattern You Ain’t Seen Nothing Yet, Bachman Turner Overdrive LJWatson.co.uk @LeonieWatson 29
  30. 30. HTML5 <ul id="tabs"> <li><a href="#panel1">Tab 1</a></li> <li><a href="#panel2">Tab 2</a></li> </ul> <div id="panel1“>…</div> <div id="panel2">…</div> LJWatson.co.uk @LeonieWatson 30
  31. 31. HTML5 + ARIA roles <ul id="tabs" role="tablist"> <li role="presentation"> <a href="#panel1“ role="tab">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab">Tab 2</a> </li> </ul> LJWatson.co.uk @LeonieWatson 31
  32. 32. HTML5 + more ARIA roles <div id="panel1" role="tabpanel">…</div> <div id="panel2" role="tabpanel">…</div> LJWatson.co.uk @LeonieWatson 32
  33. 33. HTML5 + ARIA states <ul id="tabs" role="tablist"> <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab" aria-selected="false">Tab 2</a> </li> </ul> LJWatson.co.uk @LeonieWatson 33
  34. 34. HTML5 + ARIA properties <li role="presentation"> <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab 1</a> </li> <li role="presentation"> <a href="#panel2" role="tab" aria-selected="false" aria-controls="panel2">Tab 2</a> </li> LJWatson.co.uk @LeonieWatson 34
  35. 35. HTML5 + more ARIA properties <div id="panel1" role="tabpanel" aria-labelledby="tab1">… </div> <div id="panel2" role="tabpanel" aria-labelledby="tab2">… </div> LJWatson.co.uk @LeonieWatson 35
  36. 36. Tab widget in action LJWatson.co.uk @LeonieWatson 36
  37. 37. Resources • WAI-ARIA 1.0 Authoring Practices: http://tinyurl.com/pycwv8b • Using WAI-ARIA in HTML: http://tinyurl.com/a5ln8k44 • HTML to Platform Accessibility API Mapping: http://tinyurl.com/nm8jacq • TPG blog: http://tinyurl.com/o94e7dh LJWatson.co.uk @LeonieWatson 37
  38. 38. Thank you School's Out, Alice Cooper LJWatson.co.uk @LeonieWatson 38

×