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>

8. None

9. <label> Want to do it? <wired-toggle></wired-toggle> </label>

10. None

11. <label> Want to do it? <wired-toggle role="checkbox" tabindex="0" aria-label="Wanna do

    it?"></wired-toggle> </label>
12. None

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";
16. None

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/

24. None

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

34. None

35. AOM Really cool but we have to wait...

36. Thanks! @stefanjudis