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
220
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
270
Playwright can do this?
stefanjudis
0
150
Things you should know about Frontend Development in 2022
stefanjudis
0
480
Throw yourself out there for fun and profit
stefanjudis
0
84
Back to Boring
stefanjudis
1
420
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
540
Other Decks in Technology
See All in Technology
LangGraphを使ったAIエージェント実装
iwakiyusaku
1
120
越境するプロダクトエンジニアリング
liaoziyang
0
150
社内でKaggle部を作って初学者育成した話
daikon99
1
240
失敗しないAIエージェント開発:階層的タスク分解の実践
kworkdev
PRO
0
760
社内限定だった「ChatGPTオペレーター勉強会」の極秘資料を無料で特別公開
tenho7_kodama
1
110
StotybookからはじめるVRT -個人開発編-
arrow2nd
1
930
Microsoft_20250311_AzureIoTPortfolio_PDF.pdf
iotcomjpadmin
0
190
Platform Engineering for Private Cloud
cote
PRO
0
110
AI活用の壁を超える! 開発組織への普及の秘訣
kouryou
0
160
なぜ「Event Sourcing」を選択したのか〜事実に基づくことの重要性〜/Why did we choose "Event Sourcing"?
bitkey
1
230
20250309 無冠のわたし これからどう先生きのこれる?
akiko_pusu
11
2.2k
「backlog-exporter」とAIの連携による業務効率化
shuntatoda
0
260
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
48
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Unsuck your backbone
ammeep
669
57k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Ace a Technical Interview
jacobian
276
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Facilitating Awesome Meetings
lara
53
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
14
1k
GitHub's CSS Performance
jonrohan
1030
460k
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