Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AOM (Accessible Object Model) - Really quick!
Search
stefan judis
May 17, 2018
Technology
1
210
AOM (Accessible Object Model) - Really quick!
stefan judis
May 17, 2018
Tweet
Share
More Decks by stefan judis
See All by stefan judis
Back to boring (part 2)
stefanjudis
0
260
Playwright can do this?
stefanjudis
0
140
Things you should know about Frontend Development in 2022
stefanjudis
0
480
Throw yourself out there for fun and profit
stefanjudis
0
80
Back to Boring
stefanjudis
1
410
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
220
Did we(b development) lose the right direction?
stefanjudis
6
2.1k
Regular expressions – my secret love
stefanjudis
1
1k
Write a Function
stefanjudis
0
530
Other Decks in Technology
See All in Technology
High Performance PHP
cmuench
0
110
攻撃者の視点で社内リソースはどう見えるのかを ASMで実現する
hikaruegashira
4
2.2k
AIエージェントについてまとめてみた
pharma_x_tech
20
12k
ゆもつよがこの30年間自ら経験してきたQA、テストの歴史と未来
ymty
2
360
あなたはJVMの気持ちを理解できるか?
skrb
5
2.1k
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.4k
FastConnect の冗長性
ocise
1
9.3k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
430
クラウドネイティブ時代を乗り越えるためのオブザーバビリティ(可観測性)ことはじめ_CloudNative-Observability
tkhresk
0
110
Bounded Context: Problem or Solution?
ewolff
1
180
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
3.2k
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
110
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Practical Orchestrator
shlominoach
186
10k
Building an army of robots
kneath
302
45k
Embracing the Ebb and Flow
colly
84
4.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Writing Fast Ruby
sferik
628
61k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Scaling GitHub
holman
459
140k
Why Our Code Smells
bkeepers
PRO
335
57k
Transcript
AOM (Accessibility Object Model) - REALLY QUICK - @stefanjudis
wicg.github.io/aom/demos/#7
wicg.github.io/aom/demos/#7
wicg.github.io/aom/demos/#7 ???
A JavaScript API to allow developers to modify and explore
the accessibility tree.
Reflecting ARIA attributes
<label> Want to do it? <input type="checkbox" checked> </label>
None
<label> Want to do it? <wired-toggle></wired-toggle> </label>
None
<label> Want to do it? <wired-toggle role="checkbox" tabindex="0" aria-label="Wanna do
it?"></wired-toggle> </label>
None
Currently, Web Components are forced to use ARIA to declare
their default semantics.
element.accessibleNode.role = 'checkbox'; element.accessibleNode.label = 'Want to try it?'; OR
element.role = "checkbox"; element.ariaLabel = "checkbox"; <wired-toggle></wired-toggle>
element.accessibleNode.role = 'checkbox'; element.accessibleNode.label = 'Want to try it?'; <wired-toggle></wired-toggle>
OR this.shadowRoot.role = "checkbox"; this.shadowRoot.label = "checkbox";
None
Accessible Custom Components are hard!
New Events from assistive technology
increase/decrease volume to interact with the slider no way to
do the same
•accessibleclick •accessiblecontextmenu •accessiblefocus •accessiblesetvalue •accessibleincrement •accessibledecrement •accessibleselect •accessiblescroll •accessibledismiss slider.addEventListener("accessibleincrement",
(event) => { console.log("Got Increment from assistive technology"); });
www.youtube.com/watch?v=0Zpzl4EKCco
Virtual Nodes
aframe.io/examples/showcase/360-image-gallery/
None
let virtualNode = new AccessibleNode(); virtualNode.role = "button"; virtualNode.label =
"Change Image"; document.body.attachAccessibleRoot(); document.body.accessibleRoot.appendChild(virtualNode);
wicg.github.io/aom/demos/tictactoe.html
wicg.github.io/aom/demos/tictactoe.html
Full Introspection of the Accessibility Tree
<div id="super" role="superbutton"></div> const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode =>
console.log(accessibleNode)); Does this work?
const element = document.getElementById('super'); getComputedAccessibleNode(element) .then(accessibleNode => console.log(accessibleNode)); <div id="super"
role="superbutton"></div>
Great for testing and feature detects
SPEC IS IN PROGRESS
IMPLEMENTATIONS ARE IN PROGRESS
None
AOM Really cool but we have to wait...
Thanks! @stefanjudis