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
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
540
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Go言語はstack overflowの夢を見るか?
logica0419
0
340
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
CSC509 Lecture 05
javiergs
PRO
0
300
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
180
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
チームの境界をブチ抜いていけ
tokai235
0
180
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Thoughts on Productivity
jonyablonski
70
4.9k
Side Projects
sachag
455
43k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Designing for humans not robots
tammielis
254
26k
Navigating Team Friction
lara
190
15k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
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