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
430
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
170
React Native と アクセシビリティ
grgrdkrk
2
890
DTx と アクセシビリティ
grgrdkrk
0
100
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
530
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
73
Other Decks in Programming
See All in Programming
機能追加とリーダー業務の類似性
rinchoku
2
1.1k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
180
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
430
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
490
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
230
MLH State of the League: 2026 Season
theycallmeswift
0
220
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
830
アセットのコンパイルについて
ojun9
0
110
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Balancing Empowerment & Direction
lara
3
610
Side Projects
sachag
455
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Gamification - CAS2011
davidbonilla
81
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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