Download - A Rock n Roll Guide to HTML5 & ARIA (2013)
- 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
Your basket contains 0 items.
LJWatson.co.uk @LeonieWatson 27 28. HTML5 + ARIA
- Tab 1
- Tab 2
- Tab 1
- Tab 2
- Tab 1
- Tab 2