Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AOM (Accessible Object Model) - Really quick!

AOM (Accessible Object Model) - Really quick!

stefan judis

May 17, 2018
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. A JavaScript API to allow
    developers to modify and
    explore the accessibility tree.

    View Slide

  6. Reflecting
    ARIA attributes

    View Slide


  7. Want to do it?


    View Slide

  8. View Slide


  9. Want to do it?


    View Slide

  10. View Slide


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

    View Slide

  12. View Slide

  13. Currently, Web Components are
    forced to use ARIA to declare
    their default semantics.

    View Slide

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

    View Slide

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

    OR
    this.shadowRoot.role = "checkbox";
    this.shadowRoot.label = "checkbox";

    View Slide

  16. View Slide

  17. Accessible
    Custom Components
    are hard!

    View Slide

  18. New Events from
    assistive technology

    View Slide

  19. increase/decrease volume
    to interact with the slider
    no way to do the same

    View Slide

  20. •accessibleclick
    •accessiblecontextmenu
    •accessiblefocus
    •accessiblesetvalue
    •accessibleincrement
    •accessibledecrement
    •accessibleselect
    •accessiblescroll
    •accessibledismiss
    slider.addEventListener("accessibleincrement", (event) => {
    console.log("Got Increment from assistive technology");
    });

    View Slide

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

    View Slide

  22. Virtual Nodes

    View Slide

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

    View Slide

  24. View Slide

  25. let virtualNode = new AccessibleNode();
    virtualNode.role = "button";
    virtualNode.label = "Change Image";
    document.body.attachAccessibleRoot();
    document.body.accessibleRoot.appendChild(virtualNode);

    View Slide

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

    View Slide

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

    View Slide

  28. Full Introspection of
    the Accessibility Tree

    View Slide


  29. const element = document.getElementById('super');
    getComputedAccessibleNode(element)
    .then(accessibleNode => console.log(accessibleNode));
    Does this work?

    View Slide

  30. const element = document.getElementById('super');
    getComputedAccessibleNode(element)
    .then(accessibleNode => console.log(accessibleNode));

    View Slide

  31. Great for testing
    and

    feature detects

    View Slide

  32. SPEC IS IN
    PROGRESS

    View Slide

  33. IMPLEMENTATIONS
    ARE IN PROGRESS

    View Slide

  34. View Slide

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

    View Slide

  36. Thanks!
    @stefanjudis

    View Slide