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
730
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.9k
VoiceOverの自動テスト
grgrdkrk
2
440
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
170
React Native と アクセシビリティ
grgrdkrk
2
890
DTx と アクセシビリティ
grgrdkrk
0
110
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
530
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
73
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
230
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
920
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
Model Pollution
hschwentner
1
180
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
340
Serena MCPのすすめ
wadakatu
4
900
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
CSC305 Lecture 03
javiergs
PRO
0
230
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
460
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Automating Front-end Workflow
addyosmani
1371
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Building Applications with DynamoDB
mza
96
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Practical Orchestrator
shlominoach
190
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Visualization
eitanlees
148
16k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
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