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) Its 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 Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 11 12. HTML5 + ARIA roles Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 12 13. HTML5 + ARIA states Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 13 14. Main page design pattern Solid Gold Easy Action, T.Rex LJWatson.co.uk @LeonieWatson 14 15. HTML4

LJWatson.co.uk @LeonieWatson 15 16. HTML4 + ARIA landmarks

LJWatson.co.uk @LeonieWatson 16 17. HTML5 LJWatson.co.uk @LeonieWatson 17 18. HTML5 + ARIA landmarks LJWatson.co.uk @LeonieWatson 18 19. HTML5 + ARIA landmarks exception LJWatson.co.uk @LeonieWatson 19 20. Navigation design pattern Walk This Way, Aerosmith LJWatson.co.uk @LeonieWatson 20 21. HTML5 + bad ARIA

Home ...

LJWatson.co.uk @LeonieWatson 21 22. HTML5 + good ARIA

Home ...

LJWatson.co.uk @LeonieWatson 22 23. Section design pattern All Right Now, Free LJWatson.co.uk @LeonieWatson 23 24. HTML5 Back to black ... LJWatson.co.uk @LeonieWatson 24 25. HTML5 + ARIA Back to black ... LJWatson.co.uk @LeonieWatson 25 26. Live region design pattern Atomic, Blondie LJWatson.co.uk @LeonieWatson 26 27. HTML5

Tequila Add to basket

Basket summary

Your basket contains 0 items.

LJWatson.co.uk @LeonieWatson 27 28. HTML5 + ARIA

Basket summary

Your basket contains 0 items.

LJWatson.co.uk @LeonieWatson 28 29. Tabbed widget design pattern You Aint Seen Nothing Yet, Bachman Turner Overdrive LJWatson.co.uk @LeonieWatson 29 30. HTML5

• Tab 1
• Tab 2

LJWatson.co.uk @LeonieWatson 30 31. HTML5 + ARIA roles

• Tab 1
• Tab 2

LJWatson.co.uk @LeonieWatson 31 32. HTML5 + more ARIA roles LJWatson.co.uk @LeonieWatson 32 33. HTML5 + ARIA states

• Tab 1
• Tab 2

LJWatson.co.uk @LeonieWatson 33 34. HTML5 + ARIA properties Tab 1 Tab 2 LJWatson.co.uk @LeonieWatson 34 35. HTML5 + more ARIA properties 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