AOM (Accessible Object Model) - Really quick!

AOM (Accessible Object Model) - Really quick!

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

May 17, 2018
Tweet

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