0
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 (2014)

512

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
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
512
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • ARIA1.0:
    http://www.w3.org/TR/wai-aria/

    ARIA1.1:
    http://www.w3.org/TR/wai-aria-1.1/
  • Transcript of "Extended rock n' roll guide to HTML5 & ARIA (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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×