Your SlideShare is downloading. ×
A Rock n Roll Guide to HTML5 & ARIA (2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

3,227
views

Published on

An introduction to HTML5 and ARIA with practical design patterns.

An introduction to HTML5 and ARIA with practical design patterns.

Published in: Technology, Design

2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,227
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
2
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rock n roll guide to HTML5 & ARIA Let's Do It, Joan Jett LJWatson.co.uk @LeonieWatson 1
  • 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. Web accessibility stack Stairway to Heaven, Led Zeppelin LJWatson.co.uk @LeonieWatson 3
  • 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. Accessible Rich Internet Applications (ARIA) It’s a Kind of Magic, Queen LJWatson.co.uk @LeonieWatson 5
  • 6. Roles • More than 30 ARIA roles • Including alert, dialog, checkbox, menubar,progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 6
  • 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. 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. 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. Details/summary design pattern Learning to Fly, Pink Floyd LJWatson.co.uk @LeonieWatson 10
  • 11. HTML5 <details> <summary>Favourite Pink Floyd</summary> … </details> LJWatson.co.uk @LeonieWatson 11
  • 12. HTML5 + ARIA roles <details role="group"> <summary role=“button"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 12
  • 13. HTML5 + ARIA states <details role="group"> <summary role=“button“ aria-expanded="true"> Favourite Pink Floyd </summary> … </details> LJWatson.co.uk @LeonieWatson 13
  • 14. Main page design pattern Solid Gold Easy Action, T.Rex LJWatson.co.uk @LeonieWatson 14
  • 15. HTML4 <div id="header"> … </div> <div id="main"> … </div> <div id="footer"> … </div> LJWatson.co.uk @LeonieWatson 15
  • 16. HTML4 + ARIA landmarks <div role="banner"> … </div> <div role="main"> … </div> <div role="contentinfo"> … </div> LJWatson.co.uk @LeonieWatson 16
  • 17. HTML5 <header> … </header> <main> … </main> <footer> … </footer> LJWatson.co.uk @LeonieWatson 17
  • 18. HTML5 + ARIA landmarks <header role="banner"> … </header> <main role="main"> … </main> <footer role="contentinfo"> … </footer> LJWatson.co.uk @LeonieWatson 18
  • 19. HTML5 + ARIA landmarks exception <main role="main“ <article role="article"> <header…</header> … <footer>…</footer> </article> </main> LJWatson.co.uk @LeonieWatson 19
  • 20. Navigation design pattern Walk This Way, Aerosmith LJWatson.co.uk @LeonieWatson 20
  • 21. HTML5 + bad ARIA <nav> <ul role="navigation"> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 21
  • 22. HTML5 + good ARIA <nav role="navigation"> <ul> <li><a href="home.html">Home</a></li> ... </ul> </nav> LJWatson.co.uk @LeonieWatson 22
  • 23. Section design pattern All Right Now, Free LJWatson.co.uk @LeonieWatson 23
  • 24. HTML5 <section> <h1>Back to black</h1> ... </section> LJWatson.co.uk @LeonieWatson 24
  • 25. HTML5 + ARIA <section aria-labelledby="heading"> <h1 id="heading">Back to black</h1> ... </section> LJWatson.co.uk @LeonieWatson 25
  • 26. Live region design pattern Atomic, Blondie LJWatson.co.uk @LeonieWatson 26
  • 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. 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. Tabbed widget design pattern You Ain’t Seen Nothing Yet, Bachman Turner Overdrive LJWatson.co.uk @LeonieWatson 29
  • 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. 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. HTML5 + more ARIA roles <div id="panel1" role="tabpanel">…</div> <div id="panel2" role="tabpanel">…</div> LJWatson.co.uk @LeonieWatson 32
  • 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. 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. 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. Tab widget in action LJWatson.co.uk @LeonieWatson 36
  • 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. Thank you School's Out, Alice Cooper LJWatson.co.uk @LeonieWatson 38