Transcript
- 1. Making custom widgets accessible with ARIA Epic FEL LJWatson.co.uk @LeonieWatson 1
- 2. WEB ACCESSIBILITY STACK LJWatson.co.uk @LeonieWatson 2
- 3. Stack anatomy Assistive technology ARIA Accessibility API Browser/DOM LJWatson.co.uk @LeonieWatson 3
- 4. ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA) LJWatson.co.uk @LeonieWatson 4
- 5. W3C specification ARIA 1.0 (2014) http://www.w3.org/TR/wai-aria/ ARIA 1.1 (Working Draft) http://www.w3.org/TR/wai-aria-1.1/ 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. Native roles Most HTML elements have implicit roles Foo LJWatson.co.uk @LeonieWatson 7
- 8. ARIA roles Explicit roles can be applied to semantically neutral HTML elements Foo LJWatson.co.uk @LeonieWatson 8
- 9. States 9 ARIA states. Including aria-busy, aria-checked, aria-disabled, aria-hidden, aria-invalid and aria-selected LJWatson.co.uk @LeonieWatson 9
- 10. Native states The state of some interactive elements can be expressed natively LJWatson.co.uk @ 10
- 11. ARIA states ARIA states can be applied to custom controls LJWatson.co.uk @LeonieWatson 11
- 12. Properties More than 20 ARIA properties Including aria-activedescendent, aria-controls, aria-describedby, aria-label, aria-live and aria-required LJWatson.co.uk @LeonieWatson 12
- 13. Native properties Most HTML elements have native properties (like an accessible name) LJWatson.co.uk @LeonieWatson 13
- 14. ARIA properties ARIA properties can be applied to HTML elements LJWatson.co.uk @LeonieWatson 14
- 15. USING ARIA LJWatson.co.uk @LeonieWatson 15
- 16. Custom HTML Little information is exposed through the accessibility API Foo LJWatson.co.uk @LeonieWatson 16
- 17. Adding focus Use tabindex to make the control keyboard focusable Foo LJWatson.co.uk @LeonieWatson 17
- 18. Adding a role Add an explicit role to indicate the controls purpose Foo LJWatson.co.uk @LeonieWatson 18
- 19. Adding keyboard support ARIA doesnt add functionality Use JavaScript to provide behaviour and keyboard support LJWatson.co.uk @LeonieWatson 19
- 20. NAVIGATION DESIGN PATTERN LJWatson.co.uk @LeonieWatson 20
- 21. HTML + bad ARIA
- Home ...
- 22. HTML + good ARIA
- Home ...
- 23. DYNAMIC UPDATE DESIGN PATTERN LJWatson.co.uk @LeonieWatson 23
- 24. HTML
Tequila Add to basketBasket summaryLJWatson.co.uk @LeonieWatson 24
Your basket contains 0 items.
- 25. HTML + ARIA
Basket summaryYour basket contains 0 items.LJWatson.co.uk @LeonieWatson 25
- 26. TAB WIDGET DESIGN PATTERN LJWatson.co.uk @LeonieWatson 26
- 27. HTML
- Tab 1
- Tab 2
- 28. HTML + ARIA roles
- Tab 1
- Tab 2
- 29. HTML + more ARIA roles LJWatson.co.uk @LeonieWatson 29
- 30. HTML + ARIA states
- Tab 1
- Tab 2
- 31. HTML + ARIA properties
- Tab 1
- Tab 2 LJWatson.co.uk @LeonieWatson 31
- 32. HTML + more ARIA properties LJWatson.co.uk @LeonieWatson 32
- 33. Tab widget in action LJWatson.co.uk @LeonieWatson 33
- 34. 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 34
- 35. THANK YOU! LJWatson.co.uk @LeonieWatson 35