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 ...

LJWatson.co.uk @LeonieWatson 21

22. HTML + good ARIA

• Home ...

LJWatson.co.uk @LeonieWatson 22

23. DYNAMIC UPDATE DESIGN PATTERN LJWatson.co.uk @LeonieWatson 23

24. HTML

Tequila Add to basket

Basket summary

Your basket contains 0 items.

LJWatson.co.uk @LeonieWatson 24

25. HTML + ARIA

Basket summary

Your 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

LJWatson.co.uk @LeonieWatson 27

28. HTML + ARIA roles

• Tab 1
• Tab 2

LJWatson.co.uk @LeonieWatson 28

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

35. THANK YOU! LJWatson.co.uk @LeonieWatson 35