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
Accessibility Tree と Accessibility Object Model
Search
grgr-dkrk
February 04, 2020
Programming
0
710
Accessibility Tree と Accessibility Object Model
TBD
grgr-dkrk
February 04, 2020
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.8k
VoiceOverの自動テスト
grgrdkrk
2
420
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
160
React Native と アクセシビリティ
grgrdkrk
2
870
DTx と アクセシビリティ
grgrdkrk
0
99
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
520
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
68
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
TypeScriptでDXを上げろ! Hono編
yusukebe
3
680
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
Goで作る、開発・CI環境
sin392
0
260
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
510
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
VS Code Update for GitHub Copilot
74th
2
670
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.8k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
750
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
340
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Six Lessons from altMBA
skipperchong
28
3.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
RailsConf 2023
tenderlove
30
1.1k
Designing Experiences People Love
moore
142
24k
Transcript
݄ NFHVSPFT HSHSELSL "DDFTTJCJMJUZ5SFF ͱ "DDFTTJCJMJUZ0CKFDU.PEFM
w HSHSELSLʢ!ELSLʣ w גࣜձࣾ$VSF"QQॴଐ w 3FBDU/BUJWF5ZQF4DSJQU ࣗݾհ
͢͜ͱ "DDFTTJCJMJUZ5SFFͷ͓ ʮݕ౼தʯͳؚ͓Έ·͢
"DDFTTJCJMJUZ BZ ͱ ϚγϯϦʔμϒϧ ༷ʑͳ6"ʢɺεΫϦʔϯϦʔμʔͳͲͷࢧԉٕज़ʣ ͔ΒಡΈऔΓͰ͖Δ͜ͱ ΞΫηγϒϧ ୭͕ͲΜͳঢ়ଶɺڥͰΞΫηεՄೳͳ͜ͱ
ͭͷݪଇ1063 ‣ 1FSDFJWBCMFʢ֮Մೳʣ ‣ 0QFSBCMFʢૢ࡞Մೳʣ ‣ 6OEFSTUBOEBCMFʢཧղ͍͢͠ʣ ‣ 3PCVTUʢݎ࿚Ͱ͋Δʣ IUUQTXXXXPSH8"*8$"(6OEFSTUBOEJOHJOUSP
8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"(
ͦΕ͓͖ͯ͞ ຊ
"DDFTTJCJMJUZ5SFF ΞΫηγϏϦςΟͷใΛΓऔΓ͢ΔͨΊͷπϦʔ %0.πϦʔΛͱʹੜ ߋ৽͞ΕΔ ࣮࣭%0.ͷ4VCTFU
IUUQTHJUIVCDPN8*$(BPNCMPCHIQBHFTFYQMBJOFSNEΑΓ ࢧԉٕज़ "5 ͱͷΓͱΓ
‣ /BNF ‣ %FTDSJQUJPO ‣ 3PMF ‣ 4UBUF ͳͲؚ͕·ΕΔ "DDFTTJCJMJUZ0CKFDU
"DDFTTJCJMJUZ/PEF
"DDFTTJCJMJUZੲ (6*͕ग़࢝Ίͨ͜Ζ ඳը͞Εͨ༰ΛಡΈऔ͍ͬͯͨ P⒎TDSFFONPEFM “Making the Talk” Richard Schwerdtfeger 1991,
ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt
"DDFTTJCJMJUZ"1* ‣ .4"" ‣ *"DDFTTJCMF ‣ 6*"&YQSFTT ‣ /4"DDFTTJCJMJUZ ‣
6*"DDFTTJCJMJUZ
IUUQTXXXXPSH53DPSFBBN ৭ʑͳ"1* .4"" 6*" /4" $PSF"DDFTTJCJMJUZ"1*.BQQJOHT
ಛ
"DDFTTJCJMJUZ5SFFͷΞΫηε +BWB4DSJQUͰͷΞΫηε͕ࠔ 1VQQFUFFSϒϥβͷ*OTQFDUPSͳͲ͏ import * as puppeteer from 'puppeteer' ;(async
() => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto('http://localhost:1234/') const snapshot = await page.accessibility.snapshot() console.info(snapshot) await browser.close() })()
ηϚϯςΟοΫͰͳ͍ཁૉ SPMFBSJBଐੑͰϚοϐϯάՄೳ ͨͩ͠ωΠςΟϒཁૉͷڍಈ࠶ݱ͠ͳ͍ <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc" > <h1 id="dialogTitle">Dialog</h1>
<p id="dialogDesc">આ໌Ͱ͢Α</p> </div> 8"*"3*" 8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
8"*"3*" 4UBUFΛཧ͢ΔͨΊʹΘΕΔ +BWB4DSJQU$44ͱΈ߹ΘͤΔඞཁ͕͋Δ <div role="dialog" aria-hidden="true" aria-labelledby="dialogTitle" aria-describedby="dialogDesc" > <h1
id="dialogTitle">Dialog</h1> <p id="dialogDesc">આ໌Ͱ͢Α</p> </div> 8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
*%3&' ଞཁૉͱͷؔΛ*%Ͱࣔ͢ ؔ࿈ཁૉ͕"DDFTTJCJMJUZ5SFFʹग़ͯͳ͍ͱ͍͚ͳ͍ 4IBEPX%0.ӽ͠μϝ <img src="grgr-dkrk.jpg" alt="͔Θ͍͍ΞΠίϯ" aria-describedby="desc" /> {false
&& <p id="desc">kawaii</p>}
ϑϥοτԽ ඞཁͳ͍ͱஅ͞Εͨཁૉɺ $44ͰӅ͞ΕΔཁૉͳͲআ֎͞ΕΔ͜ͱ͕͋Δ ج४όϥόϥ <figure> <img src="grgr-dkrk.jpg" alt="͔Θ͍͍ΞΠίϯ" /> </figure>
<div> <div> <div> <div> <div> <img src="grgr-dkrk.jpg" alt="͔Θ͍͍ΞΠίϯ" /> </div> </div> </div> </div> </div>
ෆదͳSPMFͷम෮ ෆదͳSPMF म෮͞ΕΔ͜ͱ͕͋Δ <ul role="cell"> <li role="table">Կ͔</li> </ul> HFOFSJDSPMF"3*"͔Β
"DDFTTJCJMJUZ5SFF ҋͳͱ͜Ζ
ҋͦͷ Ұੜ%0."45ͱઓ͏ςετπʔϧ "YF 1BZ FTMJOUQMVHJOKTYBZ 8"7&
ҋͦͷ %0.ʹഊͯ͠ ΞΫηε͕ࠔͳ$BOWBT8FC93ίϯςϯπ
ҋͦͷ ΈΜͳେ͖ࠩҟ $ISPNF 'JSFGPY
"DDFTTJCJMJUZ5SFF໊ͬͯલͷׂʹ શવΞΫηγϒϧ͡Όͳ͍ʜ ݱঢ়ͷ
"DDFTTJCJMJUZ 0CKFDU.PEFM "0.
"0.ͱ +BWB4DSJQUͰ"DDFTTJCJMJUZ5SFFʹ ΞΫηεͰ͖ΔΑ͏ʹؤுΔऔΓΈ ৭ʑ͋ͬͯෳͷϢʔεέʔεʹରԠ͢Δ ҊΛ૯শ͢Δͷʹͳͬͨ https://github.com/WICG/aom
"0.1IBTFT B"3*"3FqFDUJPO C$VTUPN&MFNFOU4FNBOUJDT 6TFS"DUJPO&WFOUT 7JSUVBM"DDFTTJCJMJUZ/PEFT $PNQVUFE"DDFTTJCJMJUZ5SFF
8"*"3*"͔Β BSJBଐੑ͕*%-ଐੑʹͳΔ const elm = document.getElementById('foo') // before elm.setAttribute('aria-hidden', 'true')
// after elm.ariaHidden = true B"SJB3FqFDUJPO
*%3&'Λ+BWB4DSJQUͰ੍ޚ͢Δ 4IBEPX%0.ͷڥքΛӽ͑ΒΕΔ ߤͯ͠Δ C$VTUPN&MFNFOU4FNBOUJDT const input = comboBox.shadowRoot.querySelector('input') const optionList
= comboBox.querySelector('custom-optionlist') input.activeDescendantElement = optionList.firstChild ίʔυIUUQTXJDHHJUIVCJPBPNFYQMBJOFSIUNM
ࢧԉٕज़ʹ͚ͨ*OQVU&WFOUͷՃ ରԠ͢Δ%0.ͷΠϕϯτΛ྆ํൃՐ͢Δ༧ఆ ࢧԉٕज़༻ऀͷϓϥΠόγʔΛอޢ͢ΔͨΊ 6TFS"DUJPO&WFOUT slider.addEventListener('increment', (ev: InputEvent) => { //
ev.key === 'ArrowUp' ൃՐ͢ΔΑͱ͍͏Ҋ })
ࢧԉٕज़͚ͷԾ/PEFΛ࡞Δ ΄ͱΜͲ4IBEPX%0. const canvas = document.getElementById('canvas') canvas.attachAccessibleRoot() const button =
canvas.accessibleRoot.appendChild(new AccessibleNode()) button.role = 'button' button.offsetLeft = '30px' button.offsetTop = '20px' button.offsetWidth = '400px' button.offsetHeight = '300px' button.focusable = true 7JSUVBM"DDFTTJCJMJUZ/PEFT
ܭࢉࡁͷ"DDFTTJCJMJUZ5SFFʹΞΫηε͢Δ &YQFSJNFOUBM͚ͩͲҰ෦ͷϒϥβͰ࣮ߦՄ window.addEventListener('load', async () => { const ComputedAccessibleNode =
ɹɹawait window.getComputedAccessibleNode(elm) console.log(ComputedAccessibleNode) }) $PNQVUFE"DDFTTJCJMJUZ5SFF
$PNQVUFE"DDFTTJCJMJUZ5SFF
՝ ϒϥβؒͰඪ४Խ͞Ε͍ͯͳ͍"DDFTTJCJMJUZ5SFFʹରͯ͠ ޓੑΛҡ࣋ͭͭ͠Ұ؏ੑͷ͋ΔͷΛެ։͢Δඞཁ͕͋Δ ͳͲ
w "DDFTTJCJMJUZ5SFF͕ΞΫηγϒϧͳΓऔΓΛՄೳʹ͢Δ w ͦͷ"DDFTTJCJMJUZ5SFFࣗମશવΞΫηγϒϧ͡Όͳ͍ w "0.͕վળͷୈҰา ·ͱΊ
։ൃऀʹ ΞΫηγϒϧͳ ମݧΛ
None