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
99
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
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
540
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
550
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
170
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
330
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
How to achieve interoperable digital identity across Asian countries
fujie
0
140
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
140
Git in Team
kawaguti
PRO
2
320
KMP の Swift export
kokihirokawa
0
340
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
How to train your dragon (web standard)
notwaldorf
96
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Site-Speed That Sticks
csswizardry
11
890
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Adaptive Systems
keathley
43
2.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Music & Morning Musume
bryan
46
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
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