AOM (Accessible Object Model) - Really quick!

Transcript

1. 1.

   AOM (Accessibility Object Model) - REALLY QUICK - @stefanjudis

2. 2.

   wicg.github.io/aom/demos/#7

3. 3.

   wicg.github.io/aom/demos/#7

4. 4.

   wicg.github.io/aom/demos/#7 ???

5. 5.

   A JavaScript API to allow developers to modify and explore

   the accessibility tree.
6. 6.

   Reflecting ARIA attributes

7. 7.

   <label> Want to do it? <input type="checkbox" checked> </label>

8. 8.

   None
9. 9.

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

10. 10.

    None
11. 11.

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

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

    None
13. 13.

    Currently, Web Components are forced to use ARIA to declare

    their default semantics.
14. 14.

    element.accessibleNode.role = 'checkbox'; element.accessibleNode.label = 'Want to try it?'; OR

    element.role = "checkbox"; element.ariaLabel = "checkbox"; <wired-toggle></wired-toggle>
15. 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. 16.

    None
17. 17.

    Accessible Custom Components are hard!

18. 18.

    New Events from assistive technology

19. 19.

    increase/decrease volume to interact with the slider no way to

    do the same
20. 20.

    •accessibleclick •accessiblecontextmenu •accessiblefocus •accessiblesetvalue •accessibleincrement •accessibledecrement •accessibleselect •accessiblescroll •accessibledismiss slider.addEventListener("accessibleincrement",

    (event) => { console.log("Got Increment from assistive technology"); });
21. 21.

    www.youtube.com/watch?v=0Zpzl4EKCco

22. 22.

    Virtual Nodes

23. 23.

    aframe.io/examples/showcase/360-image-gallery/

24. 24.

    None
25. 25.

    let virtualNode = new AccessibleNode(); virtualNode.role = "button"; virtualNode.label =

    "Change Image"; document.body.attachAccessibleRoot(); document.body.accessibleRoot.appendChild(virtualNode);
26. 26.

    wicg.github.io/aom/demos/tictactoe.html

27. 27.

    wicg.github.io/aom/demos/tictactoe.html

28. 28.

    Full Introspection of the Accessibility Tree

29. 29.

    <div id="super" role="superbutton"></div> const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode =>

    console.log(accessibleNode)); Does this work?
30. 30.

    const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode => console.log(accessibleNode)); <div id="super"

    role="superbutton"></div>
31. 31.

    Great for testing and
 feature detects

32. 32.

    SPEC IS IN PROGRESS

33. 33.

    IMPLEMENTATIONS ARE IN PROGRESS

34. 34.

    None
35. 35.

    AOM Really cool but we have to wait...

36. 36.

    Thanks! @stefanjudis