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
270
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
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
530
Other Decks in Technology
See All in Technology
分解して理解する Aspire
nenonaninu
2
490
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
14
4k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5.6k
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
2.5Dモデルのすべて
yu4u
2
930
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
660
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
ローカルLLMを活用したコード生成と、ローコード開発ツールへの応用
kazuhitoyokoi
0
130
短縮URLをお手軽に導入しよう
nakasho
0
110
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
php-conference-nagoya-2025
fuwasegu
0
110
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
850
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Site-Speed That Sticks
csswizardry
4
390
The Pragmatic Product Professional
lauravandoore
32
6.4k
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