AOM (Accessible Object Model) - Really quick!

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