AOM (Accessible Object Model) - Really quick!

Transcript

1. AOM (Accessibility Object Model) - REALLY QUICK - @stefanjudis
2. wicg.github.io/aom/demos/#7
3. wicg.github.io/aom/demos/#7
4. wicg.github.io/aom/demos/#7 ???
5. A JavaScript API to allow developers to modify and explore the accessibility tree.
6. Reflecting ARIA attributes
7. <label> Want to do it? <input type="checkbox" checked> </label>
9. <label> Want to do it? <wired-toggle></wired-toggle> </label>
11. <label> Want to do it? <wired-toggle role="checkbox" tabindex="0" aria-label="Wanna do it?"></wired-toggle> </label>
13. Currently, Web Components are forced to use ARIA to declare their default semantics.
14. element.accessibleNode.role = 'checkbox'; element.accessibleNode.label = 'Want to try it?'; OR element.role = "checkbox"; element.ariaLabel = "checkbox"; <wired-toggle></wired-toggle>
15. element.accessibleNode.role = 'checkbox'; element.accessibleNode.label = 'Want to try it?'; <wired-toggle></wired-toggle> OR this.shadowRoot.role = "checkbox"; this.shadowRoot.label = "checkbox";
17. Accessible Custom Components are hard!
18. New Events from assistive technology
19. increase/decrease volume to interact with the slider no way to do the same
20. •accessibleclick •accessiblecontextmenu •accessiblefocus •accessiblesetvalue •accessibleincrement •accessibledecrement •accessibleselect •accessiblescroll •accessibledismiss slider.addEventListener("accessibleincrement", (event) => { console.log("Got Increment from assistive technology"); });
21. www.youtube.com/watch?v=0Zpzl4EKCco
22. Virtual Nodes
23. aframe.io/examples/showcase/360-image-gallery/
25. let virtualNode = new AccessibleNode(); virtualNode.role = "button"; virtualNode.label = "Change Image"; document.body.attachAccessibleRoot(); document.body.accessibleRoot.appendChild(virtualNode);
26. wicg.github.io/aom/demos/tictactoe.html
27. wicg.github.io/aom/demos/tictactoe.html
28. Full Introspection of the Accessibility Tree
29. <div id="super" role="superbutton"></div> const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode => console.log(accessibleNode)); Does this work?
30. const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode => console.log(accessibleNode)); <div id="super" role="superbutton"></div>
31. Great for testing and
 feature detects
32. SPEC IS IN PROGRESS
33. IMPLEMENTATIONS ARE IN PROGRESS
35. AOM Really cool but we have to wait...
36. Thanks! @stefanjudis