Accessibility Tree と Accessibility Object Model

TBD

Transcript

1. ݄೔ ໦
   NFHVSPFT
   HSHSELSL
   "DDFTTJCJMJUZ5SFF
   ͱ
   "DDFTTJCJMJUZ0CKFDU.PEFM
   

   View Slide

2. w HSHSELSLʢ!ELSLʣ
   w גࣜձࣾ$VSF"QQॴଐ
   w 3FBDU/BUJWF5ZQF4DSJQU
   ࣗݾ঺հ
   

   View Slide

3. ࿩͢͜ͱ
   "DDFTTJCJMJUZ5SFFͷ͓࿩
   ʮݕ౼தʯͳ͓࿩΋ؚΈ·͢
   

   View Slide

4. "DDFTTJCJMJUZ BZ
   ͱ͸
   ϚγϯϦʔμϒϧ
   ༷ʑͳ6"ʢ୺຤ɺεΫϦʔϯϦʔμʔͳͲͷࢧԉٕज़ʣ
   ͔ΒಡΈऔΓͰ͖Δ͜ͱ
   ΞΫηγϒϧ
   ୭͕ͲΜͳঢ়ଶɺ؀ڥͰ΋ΞΫηεՄೳͳ͜ͱ
   

   View Slide

5. ͭͷݪଇ1063
   ‣ 1FSDFJWBCMFʢ஌֮Մೳʣ
   ‣ 0QFSBCMFʢૢ࡞Մೳʣ
   ‣ 6OEFSTUBOEBCMFʢཧղ͠΍͍͢ʣ
   ‣ 3PCVTUʢݎ࿚Ͱ͋Δʣ
   IUUQTXXXXPSH8"*8$"(6OEFSTUBOEJOHJOUSP
   8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"(
   
   

   View Slide

6. ͦΕ͸͓͖ͯ͞
   ຊ୊
   

   View Slide

7. "DDFTTJCJMJUZ5SFF
   ΞΫηγϏϦςΟͷ৘ใΛ΍ΓऔΓ͢ΔͨΊͷπϦʔ
   %0.πϦʔΛ΋ͱʹੜ੒ ߋ৽͞ΕΔ
   ࣮࣭%0.ͷ4VCTFU
   

   View Slide

8. IUUQTHJUIVCDPN8*$(BPNCMPCHIQBHFTFYQMBJOFSNEΑΓ
   ࢧԉٕज़ "5
   ͱͷ΍ΓͱΓ
   

   View Slide

9. ‣ /BNF
   ‣ %FTDSJQUJPO
   ‣ 3PMF
   ‣ 4UBUF
   ͳͲؚ͕·ΕΔ
   "DDFTTJCJMJUZ0CKFDU
   "DDFTTJCJMJUZ/PEF
   
   

   View Slide

10. "DDFTTJCJMJUZੲ࿩
    (6*͕ग़࢝Ίͨ͜Ζ
    ඳը͞Εͨ಺༰ΛಡΈऔ͍ͬͯͨ
    P⒎TDSFFONPEFM
    
    “Making the Talk” Richard Schwerdtfeger 1991,
    ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt
    

    View Slide

11. "DDFTTJCJMJUZ"1*
    ‣ .4""
    ‣ *"DDFTTJCMF
    ‣ 6*"&YQSFTT
    ‣ /4"DDFTTJCJMJUZ
    ‣ 6*"DDFTTJCJMJUZ
    

    View Slide

12. IUUQTXXXXPSH53DPSFBBN
    ৭ʑͳ"1*
    .4""
    6*"
    /4"
    $PSF"DDFTTJCJMJUZ"1*.BQQJOHT
    

    View Slide

13. ಛ௃
    

    View Slide

14. "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()
    })()
    

    View Slide

15. ηϚϯςΟοΫͰͳ͍ཁૉ͸
    SPMF΍BSJBଐੑͰϚοϐϯάՄೳ
    ͨͩ͠ωΠςΟϒཁૉͷڍಈ͸࠶ݱ͠ͳ͍
    
    role="dialog"
    aria-labelledby="dialogTitle"
    aria-describedby="dialogDesc"
    >
    Dialog
    આ໌Ͱ͢Α
    
    8"*"3*"
    8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
    

    View Slide

16. 8"*"3*"
    4UBUFΛ؅ཧ͢ΔͨΊʹ΋࢖ΘΕΔ
    +BWB4DSJQU΍$44ͱ૊Έ߹ΘͤΔඞཁ͕͋Δ
    role="dialog"
    aria-hidden="true"
    aria-labelledby="dialogTitle"
    aria-describedby="dialogDesc"
    >
    Dialog
    આ໌Ͱ͢Α
    
    8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT
    

    View Slide

17. *%3&'
    ଞཁૉͱͷؔ܎Λ*%Ͱࣔ͢
    ؔ࿈ཁૉ͕"DDFTTJCJMJUZ5SFFʹग़ͯͳ͍ͱ͍͚ͳ͍
    4IBEPX%0.ӽ͠΋μϝ
    alt="͔Θ͍͍ΞΠίϯ"
    aria-describedby="desc"
    />
    {false && kawaii}
    

    View Slide

18. ϑϥοτԽ
    ඞཁͳ͍ͱ൑அ͞Εͨཁૉɺ
    $44ͰӅ͞ΕΔཁૉͳͲ͸আ֎͞ΕΔ͜ͱ͕͋Δ
    ج४͸όϥόϥ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

19. ෆద੾ͳSPMFͷम෮
    ෆద੾ͳSPMF͸
    म෮͞ΕΔ͜ͱ͕͋Δ
    
    Կ͔
    
    HFOFSJDSPMF͸"3*"͔Β
    
    

    View Slide

20. "DDFTTJCJMJUZ5SFF
    ҋͳͱ͜Ζ
    

    View Slide

21. ҋͦͷ
    Ұੜ%0.΍"45ͱઓ͏ςετπʔϧ
    "YF 1BZ FTMJOUQMVHJOKTYBZ
    8"7&
    

    View Slide

22. ҋͦͷ
    %0.ʹഊ๺ͯ͠
    ΞΫηε͕ࠔ೉ͳ$BOWBT΍8FC93ίϯςϯπ
    

    View Slide

23. ҋͦͷ
    ΈΜͳେ޷͖ࠩҟ
    $ISPNF
    'JSFGPY
    

    View Slide

24. "DDFTTJCJMJUZ5SFF໊ͬͯલͷׂʹ͸
    શવΞΫηγϒϧ͡Όͳ͍ʜ
    ݱঢ়ͷ໰୊
    

    View Slide

25. "DDFTTJCJMJUZ
    0CKFDU.PEFM
    "0.
    
    

    View Slide

26. "0.ͱ͸
    +BWB4DSJQUͰ"DDFTTJCJMJUZ5SFFʹ
    ΞΫηεͰ͖ΔΑ͏ʹؤுΔऔΓ૊Έ
    ৭ʑ͋ͬͯෳ਺ͷϢʔεέʔεʹରԠ͢Δ
    ҊΛ૯শ͢Δ΋ͷʹͳͬͨ
    https://github.com/WICG/aom
    

    View Slide

27. "0.1IBTFT
    B"3*"3FqFDUJPO
    C$VTUPN&MFNFOU4FNBOUJDT
    6TFS"DUJPO&WFOUT
    7JSUVBM"DDFTTJCJMJUZ/PEFT
    $PNQVUFE"DDFTTJCJMJUZ5SFF
    

    View Slide

28. 8"*"3*"͔Β
    BSJBଐੑ͕*%-ଐੑʹͳΔ
    const elm = document.getElementById('foo')
    // before
    elm.setAttribute('aria-hidden', 'true')
    // after
    elm.ariaHidden = true
    B"SJB3FqFDUJPO
    

    View Slide

29. *%3&'Λ+BWB4DSJQUͰ੍ޚ͢Δ
    4IBEPX%0.ͷڥքΛӽ͑ΒΕΔ
    ೉ߤͯ͠Δ
    C$VTUPN&MFNFOU4FNBOUJDT
    const input = comboBox.shadowRoot.querySelector('input')
    const optionList = comboBox.querySelector('custom-optionlist')
    input.activeDescendantElement = optionList.firstChild
    ίʔυ͸IUUQTXJDHHJUIVCJPBPNFYQMBJOFSIUNM
    

    View Slide

30. ࢧԉٕज़ʹ޲͚ͨ*OQVU&WFOUͷ௥Ճ
    ରԠ͢Δ%0.ͷΠϕϯτΛ྆ํൃՐ͢Δ༧ఆ
    ࢧԉٕज़࢖༻ऀͷϓϥΠόγʔΛอޢ͢ΔͨΊ
    
    6TFS"DUJPO&WFOUT
    slider.addEventListener('increment', (ev: InputEvent) => {
    // ev.key === 'ArrowUp' ΋ൃՐ͢ΔΑͱ͍͏Ҋ
    })
    

    View Slide

31. ࢧԉٕज़޲͚ͷԾ૝/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
    

    View Slide

32. ܭࢉࡁͷ"DDFTTJCJMJUZ5SFFʹΞΫηε͢Δ
    &YQFSJNFOUBM͚ͩͲҰ෦ͷϒϥ΢βͰ࣮ߦՄ
    window.addEventListener('load', async () => {
    const ComputedAccessibleNode =
    ɹɹawait window.getComputedAccessibleNode(elm)
    console.log(ComputedAccessibleNode)
    })
    $PNQVUFE"DDFTTJCJMJUZ5SFF
    

    View Slide

33. $PNQVUFE"DDFTTJCJMJUZ5SFF
    

    View Slide

34. ՝୊
    ϒϥ΢βؒͰඪ४Խ͞Ε͍ͯͳ͍"DDFTTJCJMJUZ5SFFʹରͯ͠
    ޓ׵ੑΛҡ࣋ͭͭ͠Ұ؏ੑͷ͋Δ΋ͷΛެ։͢Δඞཁ͕͋Δ
    ͳͲ
    

    View Slide

35. w "DDFTTJCJMJUZ5SFF͕ΞΫηγϒϧͳ΍ΓऔΓΛՄೳʹ͢Δ
    w ͦͷ"DDFTTJCJMJUZ5SFFࣗମ͸શવΞΫηγϒϧ͡Όͳ͍
    w "0.͕վળ΁ͷୈҰา
    ·ͱΊ
    

    View Slide

36. ։ൃऀʹ΋
    ΞΫηγϒϧͳ
    ମݧΛ
    

    View Slide

37. View Slide