Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Extended rock n roll guide to
HTML5 & ARIA
Let's Do It, Joan Jett
LJWatson.co.uk @LeonieWatson 1
Overview
• Web accessibility stack
• Accessible Rich Internet Applications (ARIA)
• HTML5 ARIA design patterns
LJWatson.co...
Web accessibility stack
Stairway to Heaven, Led Zeppelin
LJWatson.co.uk @LeonieWatson 3
Web accessibility stack v1
• Assistive technology
• Browser DOM
LJWatson.co.uk @LeonieWatson 4
Web accessibility stack v2
• Assistive technology
• Accessibility API
• Browser DOM
LJWatson.co.uk @LeonieWatson 5
Web accessibility stack v3
• Assistive technology
• ARIA
• Accessibility API
• Browser DOM
LJWatson.co.uk @LeonieWatson 6
Accessible Rich Internet
Applications (ARIA)
It’s a Kind of Magic, Queen
LJWatson.co.uk @LeonieWatson 7
W3C specification
• ARIA1.0 (2014)
• ARIA1.1 (Public working draft)
LJWatson.co.uk @LeonieWatson 8
Roles
• More than 30 ARIA roles
• Including alert, dialog, checkbox,
menubar,progressbar, slider, tab and tree
LJWatson.co...
States
• 9 ARIA states.
• Including aria-busy, aria-checked, aria-
disabled, aria-hidden, aria-invalid and aria-
selected
...
Properties
• More than 20 ARIA properties
• Including aria-activedescendent, aria-controls,
aria-describedby, aria-label, ...
Tabindex
• Elements with tabindex="0" fit into natural
tab order
• Elements with tabindex="-1" can be focused
programmatic...
Why ARIA?
Welcome to my nightmare, Alice
Cooper
LJWatson.co.uk @LeonieWatson 13
Native HTML
• Most HTML elements have roles
<a href=http://ljwatson.co.uk>Website</a>
LJWatson.co.uk @LeonieWatson 14
Creative HTML
• The appropriate elements are not always used
<span onclick=“goHere();”>Website</span>
LJWatson.co.uk @Leon...
Using ARIA
Let’s dance, David Bowie
LJWatson.co.uk @LeonieWatson 16
HTML
<span onclick=“do This();”>Push</span>
LJWatson.co.uk @LeonieWatson 17
Adding a role
<span onclick=“doThis();”
role=“button”>Push</span>
LJWatson.co.uk @LeonieWatson 18
Adding focus
• <span onclick=“doThis();” role=“button”
tabindex=“0”>Push</span>
LJWatson.co.uk @LeonieWatson 19
Adding keyboard support
• ARIA doesn’t add functionality
• Use JavaScript to provide behaviour and
keyboard support
LJWats...
Details/summary design pattern
Learning to Fly, Pink Floyd
LJWatson.co.uk @LeonieWatson 21
HTML5
<details>
<summary>Favourite Pink Floyd</summary>
…
</details>
LJWatson.co.uk @LeonieWatson 22
HTML5 + ARIA roles
<details role="group">
<summary role=“button">
Favourite Pink Floyd
</summary>
…
</details>
LJWatson.co...
HTML5 + ARIA states
<details role="group">
<summary role=“button“ aria-expanded="true">
Favourite Pink Floyd
</summary>
…
...
Main page design pattern
Solid Gold Easy Action, T.Rex
LJWatson.co.uk @LeonieWatson 25
HTML4
<div id="header">
…
</div>
<div id="main">
…
</div>
<div id="footer">
…
</div>
LJWatson.co.uk @LeonieWatson 26
HTML4 + ARIA landmarks
<div role="banner">
…
</div>
<div role="main">
…
</div>
<div role="contentinfo">
…
</div>
LJWatson....
HTML5
<header>
…
</header>
<main>
…
</main>
<footer>
…
</footer>
LJWatson.co.uk @LeonieWatson 28
HTML5 + ARIA landmarks
<header role="banner">
…
</header>
<main role="main">
…
</main>
<footer role="contentinfo">
…
</foo...
HTML5 + ARIA landmarks exception
<main role="main“
<article role="article">
<header…</header>
…
<footer>…</footer>
</artic...
Navigation design pattern
Walk This Way, Aerosmith
LJWatson.co.uk @LeonieWatson 31
HTML5 + bad ARIA
<nav>
<ul role="navigation">
<li><a href="home.html">Home</a></li>
...
</ul>
</nav>
LJWatson.co.uk @Leoni...
HTML5 + good ARIA
<nav role="navigation">
<ul>
<li><a href="home.html">Home</a></li>
...
</ul>
</nav>
LJWatson.co.uk @Leon...
Live region design pattern
Atomic, Blondie
LJWatson.co.uk @LeonieWatson 34
HTML5
<div>
<h1>Tequila</h1>
<button>Add to basket</button>
</div>
<div>
<h2>Basket summary</h2>
<p>
Your basket contains ...
HTML5 + ARIA
<div>
<h2>Basket summary</h2>
<div aria-live="assertive" aria-atomic="true"<p>
Your basket contains <span
id=...
Tabbed widget design pattern
You Ain’t Seen Nothing Yet, Bachman
Turner Overdrive
LJWatson.co.uk @LeonieWatson 37
HTML5
<ul id="tabs">
<li><a href="#panel1">Tab 1</a></li>
<li><a href="#panel2">Tab 2</a></li>
</ul>
<div id="panel1“>…</d...
HTML5 + ARIA roles
<ul id="tabs" role="tablist">
<li role="presentation">
<a href="#panel1“ role="tab">Tab 1</a>
</li>
<li...
HTML5 + more ARIA roles
<div id="panel1" role="tabpanel">…</div>
<div id="panel2" role="tabpanel">…</div>
LJWatson.co.uk @...
HTML5 + ARIA states
<ul id="tabs" role="tablist">
<li role="presentation">
<a href="#panel1" role="tab"
aria-selected="tru...
HTML5 + ARIA properties
<li role="presentation">
<a href="#panel1" role="tab"
aria-selected="true"
aria-controls="panel1">...
HTML5 + more ARIA properties
<div id="panel1" role="tabpanel"
aria-labelledby="tab1">…
</div>
<div id="panel2" role="tabpa...
Tab widget in action
LJWatson.co.uk @LeonieWatson 44
Resources
• WAI-ARIA 1.0 Authoring Practices:
http://tinyurl.com/pycwv8b
• Using WAI-ARIA in HTML:
http://tinyurl.com/a5ln...
Thank you
School's Out, Alice Cooper
LJWatson.co.uk @LeonieWatson 46
Upcoming SlideShare
Loading in …5
×

Extended rock n' roll guide to HTML5 & ARIA (ID24 2014)

1,290 views

Published on

A look at ARIA and its relationship with HTML5, with several common HTML5 and ARIA design patterns and code examples.

Published in: Technology, Design

Extended rock n' roll guide to HTML5 & ARIA (ID24 2014)

  1. 1. Extended 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) • HTML5 ARIA design patterns LJWatson.co.uk @LeonieWatson 2
  3. 3. Web accessibility stack Stairway to Heaven, Led Zeppelin LJWatson.co.uk @LeonieWatson 3
  4. 4. Web accessibility stack v1 • Assistive technology • Browser DOM LJWatson.co.uk @LeonieWatson 4
  5. 5. Web accessibility stack v2 • Assistive technology • Accessibility API • Browser DOM LJWatson.co.uk @LeonieWatson 5
  6. 6. Web accessibility stack v3 • Assistive technology • ARIA • Accessibility API • Browser DOM LJWatson.co.uk @LeonieWatson 6
  7. 7. Accessible Rich Internet Applications (ARIA) It’s a Kind of Magic, Queen LJWatson.co.uk @LeonieWatson 7
  8. 8. W3C specification • ARIA1.0 (2014) • ARIA1.1 (Public working draft) LJWatson.co.uk @LeonieWatson 8
  9. 9. Roles • More than 30 ARIA roles • Including alert, dialog, checkbox, menubar,progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 9
  10. 10. States • 9 ARIA states. • Including aria-busy, aria-checked, aria- disabled, aria-hidden, aria-invalid and aria- selected LJWatson.co.uk @LeonieWatson 10
  11. 11. Properties • More than 20 ARIA properties • Including aria-activedescendent, aria-controls, aria-describedby, aria-label, aria-live and aria- required LJWatson.co.uk @LeonieWatson 11
  12. 12. 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 12
  13. 13. Why ARIA? Welcome to my nightmare, Alice Cooper LJWatson.co.uk @LeonieWatson 13
  14. 14. Native HTML • Most HTML elements have roles <a href=http://ljwatson.co.uk>Website</a> LJWatson.co.uk @LeonieWatson 14
  15. 15. Creative HTML • The appropriate elements are not always used <span onclick=“goHere();”>Website</span> LJWatson.co.uk @LeonieWatson 15
  16. 16. Using ARIA Let’s dance, David Bowie LJWatson.co.uk @LeonieWatson 16
  17. 17. HTML <span onclick=“do This();”>Push</span> LJWatson.co.uk @LeonieWatson 17
  18. 18. Adding a role <span onclick=“doThis();” role=“button”>Push</span> LJWatson.co.uk @LeonieWatson 18
  19. 19. Adding focus • <span onclick=“doThis();” role=“button” tabindex=“0”>Push</span> LJWatson.co.uk @LeonieWatson 19
  20. 20. Adding keyboard support • ARIA doesn’t add functionality • Use JavaScript to provide behaviour and keyboard support LJWatson.co.uk @LeonieWatson 20
  21. 21. Details/summary design pattern Learning to Fly, Pink Floyd LJWatson.co.uk @LeonieWatson 21
  22. 22. HTML5 <details> <summary>Favourite Pink Floyd</summary> … </details> LJWatson.co.uk @LeonieWatson 22
  23. 23. HTML5 + ARIA roles <details role="group"> <summary role=“button"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 23
  24. 24. HTML5 + ARIA states <details role="group"> <summary role=“button“ aria-expanded="true"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 24
  25. 25. Main page design pattern Solid Gold Easy Action, T.Rex LJWatson.co.uk @LeonieWatson 25
  26. 26. HTML4 <div id="header"> … </div> <div id="main"> … </div> <div id="footer"> … </div> LJWatson.co.uk @LeonieWatson 26
  27. 27. HTML4 + ARIA landmarks <div role="banner"> … </div> <div role="main"> … </div> <div role="contentinfo"> … </div> LJWatson.co.uk @LeonieWatson 27
  28. 28. HTML5 <header> … </header> <main> … </main> <footer> … </footer> LJWatson.co.uk @LeonieWatson 28
  29. 29. HTML5 + ARIA landmarks <header role="banner"> … </header> <main role="main"> … </main> <footer role="contentinfo"> … </footer> LJWatson.co.uk @LeonieWatson 29
  30. 30. HTML5 + ARIA landmarks exception <main role="main“ <article role="article"> <header…</header> … <footer>…</footer> </article> </main> LJWatson.co.uk @LeonieWatson 30
  31. 31. Navigation design pattern Walk This Way, Aerosmith LJWatson.co.uk @LeonieWatson 31
  32. 32. HTML5 + bad ARIA <nav> <ul role="navigation"> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 32
  33. 33. HTML5 + good ARIA <nav role="navigation"> <ul> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 33
  34. 34. Live region design pattern Atomic, Blondie LJWatson.co.uk @LeonieWatson 34
  35. 35. 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 35
  36. 36. 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 36
  37. 37. Tabbed widget design pattern You Ain’t Seen Nothing Yet, Bachman Turner Overdrive LJWatson.co.uk @LeonieWatson 37
  38. 38. 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 38
  39. 39. 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 39
  40. 40. HTML5 + more ARIA roles <div id="panel1" role="tabpanel">…</div> <div id="panel2" role="tabpanel">…</div> LJWatson.co.uk @LeonieWatson 40
  41. 41. 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 41
  42. 42. 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 42
  43. 43. 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 43
  44. 44. Tab widget in action LJWatson.co.uk @LeonieWatson 44
  45. 45. 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 45
  46. 46. Thank you School's Out, Alice Cooper LJWatson.co.uk @LeonieWatson 46

×