Accessibility Tree と Accessibility Object Model

݄೔ ໦ 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() })()

ηϚϯςΟοΫͰͳ͍ཁૉ͸ SPMF΍BSJBଐੑͰϚοϐϯάՄೳ ͨͩ͠ωΠςΟϒཁૉͷڍಈ͸࠶ݱ͠ͳ͍ <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.ʹഊ๺ͯ͠ ΞΫηε͕ࠔ೉ͳ$BOWBT΍8FC93ίϯςϯπ

ҋͦͷ ΈΜͳେ޷͖ࠩҟ $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.͕վળ΁ͷୈҰา ·ͱΊ

։ൃऀʹ΋ ΞΫηγϒϧͳ ମݧΛ

Accessibility Tree と Accessibility Object Model

Accessibility Tree と Accessibility Object Model

More Decks by grgr-dkrk

Other Decks in Programming

Featured

Transcript