Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility Tree と Accessibility Object Model

grgr-dkrk
February 04, 2020

Accessibility Tree と Accessibility Object Model

TBD

grgr-dkrk

February 04, 2020
Tweet

More Decks by grgr-dkrk

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ͦΕ͸͓͖ͯ͞
    ຊ୊

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. "DDFTTJCJMJUZੲ࿩
    (6*͕ग़࢝Ίͨ͜Ζ
    ඳը͞Εͨ಺༰ΛಡΈऔ͍ͬͯͨ
    P⒎TDSFFONPEFM

    “Making the Talk” Richard Schwerdtfeger 1991,
    ftp://service.boulder.ibm.com/sns/sr-os2/sr2doc/guitalk.txt

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. "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 full-size slide

  14. ηϚϯςΟοΫͰͳ͍ཁૉ͸
    SPMF΍BSJBଐੑͰϚοϐϯάՄೳ
    ͨͩ͠ωΠςΟϒཁૉͷڍಈ͸࠶ݱ͠ͳ͍

    role="dialog"
    aria-labelledby="dialogTitle"
    aria-describedby="dialogDesc"
    >
    Dialog
    આ໌Ͱ͢Α

    8"*"3*"
    8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT

    View full-size slide

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

    8FC"DDFTTJCJMJUZ*OJUJBUJWFr"DDFTTJCMF3JDI*OUFSOFU"QQMJDBUJPOT

    View full-size slide

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

    View full-size slide

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















    View full-size slide

  18. ෆద੾ͳSPMFͷम෮
    ෆద੾ͳSPMF͸
    म෮͞ΕΔ͜ͱ͕͋Δ

    Կ͔

    HFOFSJDSPMF͸"3*"͔Β

    View full-size slide

  19. "DDFTTJCJMJUZ5SFF
    ҋͳͱ͜Ζ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. "DDFTTJCJMJUZ
    0CKFDU.PEFM
    "0.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. *%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 full-size slide

  29. ࢧԉٕज़ʹ޲͚ͨ*OQVU&WFOUͷ௥Ճ
    ରԠ͢Δ%0.ͷΠϕϯτΛ྆ํൃՐ͢Δ༧ఆ
    ࢧԉٕज़࢖༻ऀͷϓϥΠόγʔΛอޢ͢ΔͨΊ

    6TFS"DUJPO&WFOUT
    slider.addEventListener('increment', (ev: InputEvent) => {
    // ev.key === 'ArrowUp' ΋ൃՐ͢ΔΑͱ͍͏Ҋ
    })

    View full-size slide

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

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

    View full-size slide

  32. $PNQVUFE"DDFTTJCJMJUZ5SFF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide