Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Reflecting ARIA attributes

Slide 7

Slide 7 text

Want to do it?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Want to do it?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Want to do it?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Accessible Custom Components are hard!

Slide 18

Slide 18 text

New Events from assistive technology

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Virtual Nodes

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Full Introspection of the Accessibility Tree

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Great for testing and
 feature detects

Slide 32

Slide 32 text

SPEC IS IN PROGRESS

Slide 33

Slide 33 text

IMPLEMENTATIONS ARE IN PROGRESS

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

AOM Really cool but we have to wait...

Slide 36

Slide 36 text

Thanks! @stefanjudis