1. Accessible DOM scripting with ARIA Léonie Watson LJWatson.co.uk @LeonieWatson1

2. Overview Anatomy of a rich internet application. Web accessibility stack. First principles. Best practices. Walkthrough examples. LJWatson.co.uk @LeonieWatson2

3. Anatomy of a rich internet application LJWatson.co.uk @LeonieWatson3

4. Controls and widgets Controls are single elements, like checkboxes, buttons or input fields. Widgets are composites of multiple elements, like sliders, accordions or modal dialogs. LJWatson.co.uk @LeonieWatson4

5. Applications Rich internet applications are web applications with desktop characteristics. LJWatson.co.uk @LeonieWatson5

6. First principles LJWatson.co.uk @LeonieWatson6

7. Perceivable Controls and widgets must provide information to assistive technologies. Dynamic changes in content must be communicated to assistive technologies. LJWatson.co.uk @LeonieWatson7

8. Operable Controls and widgets must be keyboard accessible. LJWatson.co.uk @LeonieWatson8

9. Understandable Controls and widgets must be properly labelled and described. LJWatson.co.uk @LeonieWatson9

10. Robust Controls and widgets must have reasonable backwards compatibility. Controls and widgets should have good forwards compatibility. LJWatson.co.uk @LeonieWatson10

11. Web accessibility stack LJWatson.co.uk @LeonieWatson11

12. Layers in the web accessibility stack Assistive technology. Accessibility API. Accessible Rich Internet Applications (ARIA). Document Object Model (DOM). LJWatson.co.uk @LeonieWatson12

13. Understanding the web accessibility stack: DOM layer LJWatson.co.uk @LeonieWatson 13

14. Understanding the web accessibility stack: ARIA layer LJWatson.co.uk @LeonieWatson14

15. Best practices LJWatson.co.uk @LeonieWatson15

16. Use native HTML elements Do this: Button text LJWatson.co.uk @LeonieWatson16

17. Don’t override native semantics Don’t do this: Button text Do this: Button text LJWatson.co.uk @LeonieWatson17

18. Managing keyboard focus LJWatson.co.uk @LeonieWatson18

19. Make controls and widgets focusable Elements with tabindex="0" are part of the natural tab sequence. Elements with tabindex="-1" are not, but are focusable with scripting. Elements with tabindex=">0" are never a good idea. LJWatson.co.uk @LeonieWatson19

20. Make focus visible Do this: a:focus, a:hover, a:active { text-decoration: underline; } Don't do this: a { text-outline:none; } LJWatson.co.uk @LeonieWatson20

21. Providing keyboard accessibility LJWatson.co.uk @LeonieWatson21

22. Use appropriate event handlers Do this: Don't do this: LJWatson.co.uk @LeonieWatson22

23. Don’t cause keyboard traps Don't do this: Don’t do this either: onfocus = "this.blur()" LJWatson.co.uk @LeonieWatson23

24. Don’t change context on focus Don't do this: … LJWatson.co.uk @LeonieWatson24

25. Handling widget focus LJWatson.co.uk @LeonieWatson25

26. Give widgets a single tab stop A widget represents a single tab stop, and other keys are used to interact with the widget itself. LJWatson.co.uk @LeonieWatson26

27. Using JavaScript to handle child focus Set tabindex of current child to 0, and all other children to -1. As the user moves to another child, update the tabindex for the previous and current children accordingly. Use element.focus() to move focus to the child with tabindex set to 0. LJWatson.co.uk @LeonieWatson27

28. Using ARIA to handle child focus Set the tabindex of the parent element to 0, and set its aria-activedescendant property to the id of the currently active child. As the user moves to another child, update the aria-activedescendant property accordingly. LJWatson.co.uk @LeonieWatson28

29. Put the key handler on the parent element Captures the keystrokes, determines which element takes focus next, and updates the aria-activedesendant property. LJWatson.co.uk @LeonieWatson29

30. Use the scrollIntoView() method Or a purpose built function, to ensure the active descendant moves into view. LJWatson.co.uk @LeonieWatson30

31. Providing keyboard shortcuts LJWatson.co.uk @LeonieWatson31

32. Don’t enable keyboard shortcuts by default Many assistive technologies are controlled with native shortcuts. Custom shortcuts should be clearly documented. LJWatson.co.uk @LeonieWatson32

33. Cancel (or swallow) keyboard events Prevent the key from executing an action outside of the widget or web application, unless focus is on a form field. LJWatson.co.uk @LeonieWatson33

34. Dynamically updating content LJWatson.co.uk @LeonieWatson34

35. Using CSS to show/hide content Use CSS when the content makes sense as part of the page, not when it’s dependent on a certain action. LJWatson.co.uk @LeonieWatson35

36. Injecting content into the DOM Do this: var errors = document.getElementById("errors"); var error = document.createElement("p"); error.appendChild(document.createText Node("You must provide a username.")); errors.appendChild(error); LJWatson.co.uk @LeonieWatson36

37. Using innerHTML Do this: var html = ""; html = html + " You must enter a username "; html = html + " Please use at least one number in your password "; document.getElementById("errors").inn erHTML = " " + html + " "; LJWatson.co.uk @LeonieWatson37

38. Walkthrough examples LJWatson.co.uk @LeonieWatson38

39. Expandable content (HTML/ARIA) Types of tea Types of tea Black tea Green tea LJWatson.co.uk @LeonieWatson39

40. Expandable content (JavaScript) document.getElementById("tea").onclick = function() { var tea = document.getElementById("tea- content"); var expanded; tea.style.display = (tea.style.display == "block") ? "none" : "block“; expanded = tea.getAttribute("aria-expanded") == "false" ? "true" : "false“; tea.setAttribute("aria-expanded", expanded); }; LJWatson.co.uk @LeonieWatson40

41. Live region updates (HTML/ARIA) Tequila Tequila makes me happy... Add to basket Basket summary Your basket contains 0 items. LJWatson.co.uk @LeonieWatson41

42. Live region updates (JavaScript) var items = 0; function updateItems () { items = items + 1; document.getElementById("quantity").innerHTML=items; } LJWatson.co.uk @LeonieWatson42

43. Modal dialogs (HTML/ARIA) Open modal Modal title Modal message. Ok Cancel LJWatson.co.uk @LeonieWatson43

44. Modal dialogs (JavaScript 1) (function(){ function openModal() { modal.style.display = 'block‘; setTimeout(function () {objFirst.focus();}, 100); } function closeModal() { modal.style.display = 'none‘; trigger.focus(); } … })(); LJWatson.co.uk @LeonieWatson44

45. Modal dialogs (JavaScript 2) (function(){ … function handleKeyboard(event) { switch (event.keyCode) { case 9: if (event.target === objLast && !event.shiftKey) { objFirst.focus(); event.preventDefault(); } else if (event.target === objFirst && event.shiftKey) { objLast.focus(); event.preventDefault(); } return false; break; case 27: closeModal(); return false; break; default: return true; } } … } LJWatson.co.uk @LeonieWatson45

46. Resources WAI-ARIA 1.0 Authoring Practices: http://www.w3.org/TR/wai-aria-practices/ Using WAI-ARIA in HTML: http://www.w3.org/TR/2013/WD-aria-in-html-20130214/ HTML to Platform Accessibility APIs Implementation Guide: http://www.w3.org/TR/html-aapi/ The Paciello Group Blog: http://blog.paciellogroup.com/ Open AJAX Alliance Examples: http://www.oaa-accessibility.org/examples/ LJWatson.co.uk @LeonieWatson46

47. Thank you! LJWatson.co.uk @LeonieWatson47