Léonie Watson

Transcript

1. Developer's guide to accessibility APIs FrontFest, Moscow 2017 Léonie Watson ~ The Paciello Group • Mastodon: @tink@toot.cafe • Twitter: @LeonieWatson • Blog: tink.uk • Github: https://github.com/ljwatson 1
2. Screen readers Software that translates on-screen content into synthetic speech 2
3. Screen reader demo: text 3
4. Screen reader demo: headings 4
5. HTML checkbox <input type="checkbox" id="bold"> <label for="bold">Bold</label> 5
6. DOM tree 6
7. Rendered view Bold checkbox 7
8. Accessibility tree 8
9. Windows: Mac OS: Linux: Accessibility APIs UI Automation (UIA) MS Active Accessibility (MSAA) IAccessible2 (IA2) OSX Accessibility Protocol (AXAPI) Accessibility Toolkit (ATK) AT Service Provider Interface (AT-SPI) 9
10. Accessibility mechanics • Browser builds the DOM and a11y tree • Screen reader queries the accessibility tree • Browser responds to changes in the DOM, then updates the a11y tree • Screen reader listens for changes in the a11y tree 10
11. Accessibility API mappings (AAM) Define how role, state, properties, and keyboard focus for native elements are handled in the browser • Core Accessibility API Mappings (AAM) 1.1 w3.org/TR/core-aam-1.1 • HTML AMM 1.0 w3.org/TR/html-aam-1.0 • SVG AAM 1.0 w3.org/TR/svg-aam-1.0 11
12. Accessibility supported Browsers may support an element, but not accessibility support it • html5accessibility.com 12
13. The details and summary elements <details> <summary>Tequila...</summary> Makes me happy! </details> 13
14. Edge: not implemented details/summary elements in Edge 14
15. Firefox: implemented 15
16. Role: State: Accessibility information button focusable focused expandable collapsed 16
17. Screen reader demo 17
18. Using ARIA Attributes that polyfill missing role, name, and state information for screen readers • ARIA 1.0: w3.org/tr/wai-aria/ • ARIA 1.1 (Candidate Recommendation): w3.org/tr/wai-aria-1.1/ 18
19. The role attribute 70+ roles, including: • tablist, tab, tabpanel • checkbox, radio, textbox • table, row, cell • toolbar, menu, menubar 19
20. The aria- attributes 45+ states and properties, including: • aria-invalid , aria-required • aria-pressed , aria-expanded • aria-controls , aria-owns 20
21. The details and summary elements <details> <summary id="button">Tequila...</summary> <div id="content">Makes me happy!</div> </details> 21
22. Create DOM node references var button = document.getElementById('button'); var content = document.getElementById('content'); 22
23. Set role="button" button.setAttribute('role', 'button'); 23
24. Set tabindex="0" button.setAttribute('tabindex', 0); 24
25. Set aria-expanded="false" button.setAttribute('aria-expanded', 'false'); 25
26. Set hidden attribute content.setAttribute('hidden', 'true'); 26
27. Rendered code <details> <summary id="button" role="button" tabindex="0" aria-expanded="false"> Tequila... </summary> <div id="content" hidden>Makes me happy!</div>Makes me happy! </details> 27
28. Add functionality function disclose(event) { if (content.hasAttribute('hidden')) { button.setAttribute('aria-expanded', 'true'); content.removeAttribute('hidden'); } else { button.setAttribute('aria-expanded', 'false'); content.setAttribute('hidden', 'true'); } } 28
29. Add event listeners button.addEventListener('click', disclose, false); button.addEventListener('keydown', function(event) { if (event.keyCode == 13 || event.keyCode ==32) { disclose(); } }); 29
30. Screen reader demo 30
31. Accessibility Object Model (AOM) Experimental JavaScript API that enables developers to modify the accessibility tree 31
32. AOM phases 1. Modify the semantic properties of the accessibility node associated with a DOM node; 2. Directly respond to events or actions from AT; 3. Create virtual accessibility nodes (not associated with DOM nodes); 4. Programmatically explore the accessibility tree, and access the computed properties of accessibility nodes. 32
33. AOM Phase 1 Has landed in Chrome Canary behind the flag: --enable-blink-features=AccessibilityObjectModel 33
34. The details and summary elements <details> <summary id="button">Tequila...</summary> <div id="content">Makes me happy!</div> </details> 34
35. Create DOM node references var button = document.getElementById('button'); var content = document.getElementById('content'); 35
36. Modify DOM node properties button.setAttribute('tabindex', 0); content.setAttribute('hidden', true); 36
37. Set AOM button property button.accessibleNode.role = "button"; 37
38. Set AOM expanded property button.accessibleNode.expanded = false; 38
39. Create AccessibleNodeList var references = new AccessibleNodeList(); 39
40. Add AccessibleNode to array references.add(content.accessibleNode); 40
41. Create the function function disclose(event) { if(content.getAttribute('hidden')) { button.accessibleNode.expanded = true; button.accessibleNode.controls = content; content.removeAttribute('hidden'); } else { button.accessibleNode.expanded = false; button.accessibleNode.controls = null; content.setAttribute('hidden', true); } } 41
42. Add event listeners button.addEventListener('click', disclose, false); button.addEventListener('keydown', function(event) { if (event.keyCode == 13 || event.keyCode ==32) { disclose(); } }); 42
43. Screen reader demo: AOM disclosure 43
44. Thank you! Léonie Watson ~ The Paciello Group • Mastodon: @tink@toot.cafe • Twitter: @LeonieWatson • Blog: tink.uk • Github: https://github.com/ljwatson 44