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
100
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgrdkrk
0
530
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
73
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
1から理解するWeb Push
dora1998
7
1.9k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
120
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
概念モデル→論理モデルで気をつけていること
sunnyone
2
200
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.5k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
280
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
470
print("Hello, World")
eddie
2
530
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Docker and Python
trallard
45
3.6k
How GitHub (no longer) Works
holman
315
140k
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
207
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Navigating Team Friction
lara
189
15k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Producing Creativity
orderedlist
PRO
347
40k
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