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

• 1. Extended 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) HTML5 ARIA design patterns LJWatson.co.uk @LeonieWatson 2 3. Web accessibility stack Stairway to Heaven, Led Zeppelin LJWatson.co.uk @LeonieWatson 3 4. Web accessibility stack v1 Assistive technology Browser DOM LJWatson.co.uk @LeonieWatson 4 5. Web accessibility stack v2 Assistive technology Accessibility API Browser DOM LJWatson.co.uk @LeonieWatson 5 6. Web accessibility stack v3 Assistive technology ARIA Accessibility API Browser DOM LJWatson.co.uk @LeonieWatson 6 7. Accessible Rich Internet Applications (ARIA) Its a Kind of Magic, Queen LJWatson.co.uk @LeonieWatson 7 8. W3C specification ARIA1.0 (2014) ARIA1.1 (Public working draft) LJWatson.co.uk @LeonieWatson 8 9. Roles More than 30 ARIA roles Including alert, dialog, checkbox, menubar,progressbar, slider, tab and tree LJWatson.co.uk @LeonieWatson 9 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. 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. 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. Why ARIA? Welcome to my nightmare, Alice Cooper LJWatson.co.uk @LeonieWatson 13 14. Native HTML Most HTML elements have roles Website LJWatson.co.uk @LeonieWatson 14 15. Creative HTML The appropriate elements are not always used Website LJWatson.co.uk @LeonieWatson 15 16. Using ARIA Lets dance, David Bowie LJWatson.co.uk @LeonieWatson 16 17. HTML Push LJWatson.co.uk @LeonieWatson 17 18. Adding a role Push LJWatson.co.uk @LeonieWatson 18 19. Adding focus Push LJWatson.co.uk @LeonieWatson 19 20. Adding keyboard support ARIA doesnt add functionality Use JavaScript to provide behaviour and keyboard support LJWatson.co.uk @LeonieWatson 20 21. Details/summary design pattern Learning to Fly, Pink Floyd LJWatson.co.uk @LeonieWatson 21 22. HTML5 Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 22 23. HTML5 + ARIA roles Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 23 24. HTML5 + ARIA states Favourite Pink Floyd LJWatson.co.uk @LeonieWatson 24 25. Main page design pattern Solid Gold Easy Action, T.Rex LJWatson.co.uk @LeonieWatson 25 26. HTML4

LJWatson.co.uk @LeonieWatson 26 27. HTML4 + ARIA landmarks

LJWatson.co.uk @LeonieWatson 27 28. HTML5 LJWatson.co.uk @LeonieWatson 28 29. HTML5 + ARIA landmarks LJWatson.co.uk @LeonieWatson 29 30. HTML5 + ARIA landmarks exception LJWatson.co.uk @LeonieWatson 30 31. Navigation design pattern Walk This Way, Aerosmith LJWatson.co.uk @LeonieWatson 31 32. HTML5 + bad ARIA

• Home ...

LJWatson.co.uk @LeonieWatson 32 33. HTML5 + good ARIA

• Home ...

LJWatson.co.uk @LeonieWatson 33 34. Live region design pattern Atomic, Blondie LJWatson.co.uk @LeonieWatson 34 35. HTML5

LJWatson.co.uk @LeonieWatson 35 36. HTML5 + ARIA