TBD
݄ NFHVSPFTHSHSELSL"DDFTTJCJMJUZ5SFFͱ"DDFTTJCJMJUZ0CKFDU.PEFM
View Slide
w HSHSELSLʢ!ELSLʣw גࣜձࣾ$VSF"QQॴଐw 3FBDU/BUJWF5ZQF4DSJQUࣗݾհ
͢͜ͱ"DDFTTJCJMJUZ5SFFͷ͓ʮݕ౼தʯͳؚ͓Έ·͢
"DDFTTJCJMJUZ BZͱϚγϯϦʔμϒϧ༷ʑͳ6"ʢɺεΫϦʔϯϦʔμʔͳͲͷࢧԉٕज़ʣ͔ΒಡΈऔΓͰ͖Δ͜ͱΞΫηγϒϧ୭͕ͲΜͳঢ়ଶɺڥͰΞΫηεՄೳͳ͜ͱ
ͭͷݪଇ1063‣ 1FSDFJWBCMFʢ֮Մೳʣ‣ 0QFSBCMFʢૢ࡞Մೳʣ‣ 6OEFSTUBOEBCMFʢཧղ͍͢͠ʣ‣ 3PCVTUʢݎ࿚Ͱ͋ΔʣIUUQTXXXXPSH8"*8$"(6OEFSTUBOEJOHJOUSP8FC$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ଐੑͰϚοϐϯάՄೳͨͩ͠ωΠςΟϒཁૉͷڍಈ࠶ݱ͠ͳ͍role="dialog"aria-labelledby="dialogTitle"aria-describedby="dialogDesc">Dialogઆ໌Ͱ͢Α8"*"3*"8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
8"*"3*"4UBUFΛཧ͢ΔͨΊʹΘΕΔ+BWB4DSJQU$44ͱΈ߹ΘͤΔඞཁ͕͋Δrole="dialog"aria-hidden="true"aria-labelledby="dialogTitle"aria-describedby="dialogDesc">Dialogઆ໌Ͱ͢Α8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
*%3&'ଞཁૉͱͷؔΛ*%Ͱࣔؔ͢࿈ཁૉ͕"DDFTTJCJMJUZ5SFFʹग़ͯͳ͍ͱ͍͚ͳ͍4IBEPX%0.ӽ͠μϝalt="͔Θ͍͍ΞΠίϯ"aria-describedby="desc"/>{false && kawaii}
ϑϥοτԽඞཁͳ͍ͱஅ͞Εͨཁૉɺ$44ͰӅ͞ΕΔཁૉͳͲআ֎͞ΕΔ͜ͱ͕͋Δج४όϥόϥ
ෆదͳSPMFͷम෮ෆదͳSPMFम෮͞ΕΔ͜ͱ͕͋ΔԿ͔HFOFSJDSPMF"3*"͔Β
"DDFTTJCJMJUZ5SFFҋͳͱ͜Ζ
ҋͦͷҰੜ%0."45ͱઓ͏ςετπʔϧ"YF 1BZ FTMJOUQMVHJOKTYBZ8"7&
ҋͦͷ%0.ʹഊͯ͠ΞΫηε͕ࠔͳ$BOWBT8FC93ίϯςϯπ
ҋͦͷΈΜͳେ͖ࠩҟ$ISPNF'JSFGPY
"DDFTTJCJMJUZ5SFF໊ͬͯલͷׂʹશવΞΫηγϒϧ͡Όͳ͍ʜݱঢ়ͷ
"DDFTTJCJMJUZ0CKFDU.PEFM"0.
"0.ͱ+BWB4DSJQUͰ"DDFTTJCJMJUZ5SFFʹΞΫηεͰ͖ΔΑ͏ʹؤுΔऔΓΈ৭ʑ͋ͬͯෳͷϢʔεέʔεʹରԠ͢ΔҊΛ૯শ͢Δͷʹͳͬͨhttps://github.com/WICG/aom
"0.1IBTFTB"3*"3FqFDUJPOC$VTUPN&MFNFOU4FNBOUJDT6TFS"DUJPO&WFOUT7JSUVBM"DDFTTJCJMJUZ/PEFT$PNQVUFE"DDFTTJCJMJUZ5SFF
8"*"3*"͔ΒBSJBଐੑ͕*%-ଐੑʹͳΔconst elm = document.getElementById('foo')// beforeelm.setAttribute('aria-hidden', 'true')// afterelm.ariaHidden = trueB"SJB3FqFDUJPO
*%3&'Λ+BWB4DSJQUͰ੍ޚ͢Δ4IBEPX%0.ͷڥքΛӽ͑ΒΕΔߤͯ͠ΔC$VTUPN&MFNFOU4FNBOUJDTconst input = comboBox.shadowRoot.querySelector('input')const optionList = comboBox.querySelector('custom-optionlist')input.activeDescendantElement = optionList.firstChildίʔυIUUQTXJDHHJUIVCJPBPNFYQMBJOFSIUNM
ࢧԉٕज़ʹ͚ͨ*OQVU&WFOUͷՃରԠ͢Δ%0.ͷΠϕϯτΛ྆ํൃՐ͢Δ༧ఆࢧԉٕज़༻ऀͷϓϥΠόγʔΛอޢ͢ΔͨΊ6TFS"DUJPO&WFOUTslider.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 = true7JSUVBM"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.͕վળͷୈҰา·ͱΊ
։ൃऀʹΞΫηγϒϧͳମݧΛ