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
250
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
300
Playwright can do this?
stefanjudis
0
190
Things you should know about Frontend Development in 2022
stefanjudis
0
510
Throw yourself out there for fun and profit
stefanjudis
0
100
Back to Boring
stefanjudis
1
460
Wanna scale up? Make sure your CMS is ready for it!
stefanjudis
0
240
Did we(b development) lose the right direction?
stefanjudis
6
2.2k
Regular expressions – my secret love
stefanjudis
1
1.1k
Write a Function
stefanjudis
0
570
Other Decks in Technology
See All in Technology
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
170
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
Introdução a Service Mesh usando o Istio
aeciopires
0
170
CoRL 2025 Survey
harukiabe
1
210
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
250
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
230
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.5k
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
15k
Digitization部 紹介資料
sansan33
PRO
1
5.5k
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
230
React19.2のuseEffectEventを追う
maguroalternative
0
350
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Navigating Team Friction
lara
190
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
A better future with KSS
kneath
239
18k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Visualization
eitanlees
149
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Invisible Side of Design
smashingmag
302
51k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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