Repurposing HTML elements into custom widgets is common practice on the web, but making your widgets cross-platform and cross-device is another matter. HTML, CSS and JavaScript is only part of the story. Find out how ARIA (Accessible Rich Internet Applications) and enhanced scripting can make your widgets usable by more people. Learn about the web accessibility stack, and the relationship between the DOM, browser accessibility APIs and assistive technologies like screen readers.
Citation preview
1. Making custom widgets accessible with ARIA Epic FEL
LJWatson.co.uk @LeonieWatson 1
2. WEB ACCESSIBILITY STACK LJWatson.co.uk @LeonieWatson 2
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
29. HTML + more ARIA roles LJWatson.co.uk @LeonieWatson 29
30. HTML + ARIA states
Tab 1
Tab 2
LJWatson.co.uk @LeonieWatson 30
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