Slide 1
Slide 1 text
݄
NFHVSPFT
HSHSELSL
"DDFTTJCJMJUZ5SFF
ͱ
"DDFTTJCJMJUZ0CKFDU.PEFM
Slide 2
Slide 2 text
w HSHSELSLʢ!ELSLʣ
w גࣜձࣾ$VSF"QQॴଐ
w 3FBDU/BUJWF5ZQF4DSJQU
ࣗݾհ
Slide 3
Slide 3 text
͢͜ͱ
"DDFTTJCJMJUZ5SFFͷ͓
ʮݕ౼தʯͳؚ͓Έ·͢
Slide 4
Slide 4 text
"DDFTTJCJMJUZ BZ
ͱ
ϚγϯϦʔμϒϧ
༷ʑͳ6"ʢɺεΫϦʔϯϦʔμʔͳͲͷࢧԉٕज़ʣ
͔ΒಡΈऔΓͰ͖Δ͜ͱ
ΞΫηγϒϧ
୭͕ͲΜͳঢ়ଶɺڥͰΞΫηεՄೳͳ͜ͱ
Slide 5
Slide 5 text
ͭͷݪଇ1063
‣ 1FSDFJWBCMFʢ֮Մೳʣ
‣ 0QFSBCMFʢૢ࡞Մೳʣ
‣ 6OEFSTUBOEBCMFʢཧղ͍͢͠ʣ
‣ 3PCVTUʢݎ࿚Ͱ͋Δʣ
IUUQTXXXXPSH8"*8$"(6OEFSTUBOEJOHJOUSP
8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"(
Slide 6
Slide 6 text
ͦΕ͓͖ͯ͞
ຊ
Slide 7
Slide 7 text
"DDFTTJCJMJUZ5SFF
ΞΫηγϏϦςΟͷใΛΓऔΓ͢ΔͨΊͷπϦʔ
%0.πϦʔΛͱʹੜ
ߋ৽͞ΕΔ
࣮࣭%0.ͷ4VCTFU
Slide 8
Slide 8 text
IUUQTHJUIVCDPN8*$(BPNCMPCHIQBHFTFYQMBJOFSNEΑΓ
ࢧԉٕज़ "5
ͱͷΓͱΓ
Slide 9
Slide 9 text
‣ /BNF
‣ %FTDSJQUJPO
‣ 3PMF
‣ 4UBUF
ͳͲؚ͕·ΕΔ
"DDFTTJCJMJUZ0CKFDU
"DDFTTJCJMJUZ/PEF
Slide 10
Slide 10 text
"DDFTTJCJMJUZੲ
(6*͕ग़࢝Ίͨ͜Ζ
ඳը͞Εͨ༰ΛಡΈऔ͍ͬͯͨ
P⒎TDSFFONPEFM
“Making the Talk” Richard Schwerdtfeger 1991,
ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt
Slide 11
Slide 11 text
"DDFTTJCJMJUZ"1*
‣ .4""
‣ *"DDFTTJCMF
‣ 6*"&YQSFTT
‣ /4"DDFTTJCJMJUZ
‣ 6*"DDFTTJCJMJUZ
Slide 12
Slide 12 text
IUUQTXXXXPSH53DPSFBBN
৭ʑͳ"1*
.4""
6*"
/4"
$PSF"DDFTTJCJMJUZ"1*.BQQJOHT
Slide 13
Slide 13 text
ಛ
Slide 14
Slide 14 text
"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()
})()
Slide 15
Slide 15 text
ηϚϯςΟοΫͰͳ͍ཁૉ
SPMFBSJBଐੑͰϚοϐϯάՄೳ
ͨͩ͠ωΠςΟϒཁૉͷڍಈ࠶ݱ͠ͳ͍
8"*"3*"
8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
Dialog
આ໌Ͱ͢Α
Slide 16
Slide 16 text
8"*"3*"
4UBUFΛཧ͢ΔͨΊʹΘΕΔ
+BWB4DSJQU$44ͱΈ߹ΘͤΔඞཁ͕͋Δ
8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
Dialog
આ໌Ͱ͢Α
Slide 17
Slide 17 text
*%3&'
ଞཁૉͱͷؔΛ*%Ͱࣔ͢
ؔ࿈ཁૉ͕"DDFTTJCJMJUZ5SFFʹग़ͯͳ͍ͱ͍͚ͳ͍
4IBEPX%0.ӽ͠μϝ
{false &&
{false && kawaii
}Slide 18
Slide 18 text
ϑϥοτԽ
ඞཁͳ͍ͱஅ͞Εͨཁૉɺ
$44ͰӅ͞ΕΔཁૉͳͲআ֎͞ΕΔ͜ͱ͕͋Δ
ج४όϥόϥ
Slide 19
Slide 19 text
ෆదͳSPMFͷम෮
ෆదͳSPMF
म෮͞ΕΔ͜ͱ͕͋Δ
- Կ͔
Slide 20
Slide 20 text
"DDFTTJCJMJUZ5SFF
ҋͳͱ͜Ζ
Slide 21
Slide 21 text
ҋͦͷ
Ұੜ%0."45ͱઓ͏ςετπʔϧ
"YF 1BZ FTMJOUQMVHJOKTYBZ
8"7&
Slide 22
Slide 22 text
ҋͦͷ
%0.ʹഊͯ͠
ΞΫηε͕ࠔͳ$BOWBT8FC93ίϯςϯπ
Slide 23
Slide 23 text
ҋͦͷ
ΈΜͳେ͖ࠩҟ
$ISPNF
'JSFGPY
Slide 24
Slide 24 text
"DDFTTJCJMJUZ5SFF໊ͬͯલͷׂʹ
શવΞΫηγϒϧ͡Όͳ͍ʜ
ݱঢ়ͷ
Slide 25
Slide 25 text
"DDFTTJCJMJUZ
0CKFDU.PEFM
"0.
Slide 26
Slide 26 text
"0.ͱ
+BWB4DSJQUͰ"DDFTTJCJMJUZ5SFFʹ
ΞΫηεͰ͖ΔΑ͏ʹؤுΔऔΓΈ
৭ʑ͋ͬͯෳͷϢʔεέʔεʹରԠ͢Δ
ҊΛ૯শ͢Δͷʹͳͬͨ
https://github.com/WICG/aom
Slide 27
Slide 27 text
"0.1IBTFT
B"3*"3FqFDUJPO
C$VTUPN&MFNFOU4FNBOUJDT
6TFS"DUJPO&WFOUT
7JSUVBM"DDFTTJCJMJUZ/PEFT
$PNQVUFE"DDFTTJCJMJUZ5SFF
Slide 28
Slide 28 text
8"*"3*"͔Β
BSJBଐੑ͕*%-ଐੑʹͳΔ
const elm = document.getElementById('foo')
// before
elm.setAttribute('aria-hidden', 'true')
// after
elm.ariaHidden = true
B"SJB3FqFDUJPO
Slide 29
Slide 29 text
*%3&'Λ+BWB4DSJQUͰ੍ޚ͢Δ
4IBEPX%0.ͷڥքΛӽ͑ΒΕΔ
ߤͯ͠Δ
C$VTUPN&MFNFOU4FNBOUJDT
const input = comboBox.shadowRoot.querySelector('input')
const optionList = comboBox.querySelector('custom-optionlist')
input.activeDescendantElement = optionList.firstChild
ίʔυIUUQTXJDHHJUIVCJPBPNFYQMBJOFSIUNM
Slide 30
Slide 30 text
ࢧԉٕज़ʹ͚ͨ*OQVU&WFOUͷՃ
ରԠ͢Δ%0.ͷΠϕϯτΛ྆ํൃՐ͢Δ༧ఆ
ࢧԉٕज़༻ऀͷϓϥΠόγʔΛอޢ͢ΔͨΊ
6TFS"DUJPO&WFOUT
slider.addEventListener('increment', (ev: InputEvent) => {
// ev.key === 'ArrowUp' ൃՐ͢ΔΑͱ͍͏Ҋ
})
Slide 31
Slide 31 text
ࢧԉٕज़͚ͷԾ/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
Slide 32
Slide 32 text
ܭࢉࡁͷ"DDFTTJCJMJUZ5SFFʹΞΫηε͢Δ
&YQFSJNFOUBM͚ͩͲҰ෦ͷϒϥβͰ࣮ߦՄ
window.addEventListener('load', async () => {
const ComputedAccessibleNode =
ɹɹawait window.getComputedAccessibleNode(elm)
console.log(ComputedAccessibleNode)
})
$PNQVUFE"DDFTTJCJMJUZ5SFF
Slide 33
Slide 33 text
$PNQVUFE"DDFTTJCJMJUZ5SFF
Slide 34
Slide 34 text
՝
ϒϥβؒͰඪ४Խ͞Ε͍ͯͳ͍"DDFTTJCJMJUZ5SFFʹରͯ͠
ޓੑΛҡ࣋ͭͭ͠Ұ؏ੑͷ͋ΔͷΛެ։͢Δඞཁ͕͋Δ
ͳͲ
Slide 35
Slide 35 text
w "DDFTTJCJMJUZ5SFF͕ΞΫηγϒϧͳΓऔΓΛՄೳʹ͢Δ
w ͦͷ"DDFTTJCJMJUZ5SFFࣗମશવΞΫηγϒϧ͡Όͳ͍
w "0.͕վળͷୈҰา
·ͱΊ
Slide 36
Slide 36 text
։ൃऀʹ
ΞΫηγϒϧͳ
ମݧΛ
Slide 37
Slide 37 text
No content