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

Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

Okuto Oyama
October 16, 2022

Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

Vue Fes Japan Online 2022 発表資料(Web 版

昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。
最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。
しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシブルでなくなる可能性もあります。
この発表ではそうした間違いや疑問を解消し Vue.js でのアクセシビリティ向上に取り組みやすくするやり方を発表いたします。

Okuto Oyama

October 16, 2022
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

Transcript

  1. Vue.js Ͱ

    ΞΫηγϒϧͳ


    ίϯϙʔωϯτΛͭ͘ΔͨΊʹ
    Vue Fes Japan Online 2022 - 2022/10/16

    View full-size slide

  2. Vue.js Ͱ

    ΞΫηγϒϧͳ


    ίϯϙʔωϯτΛͭ͘ΔͨΊʹ
    Vue Fes Japan Online 2022 - 2022/10/16
    ͜Ε͔ΒʮVue.js ͰΞΫηγϒϧͳίϯϙʔωϯτΛͭ͘ΔͨΊʹʯ
    ͱ͍͏λΠτϧͰൃදΛ͍͖ͤͯͨͩ͞·͢ɻΑΖ͓͘͠ئ͍͠·͢ɻ

    View full-size slide

  3. ͸͡Ίʹ
    ࠷ॳʹࣗݾ঺հͰ͢ɻ

    View full-size slide

  4. ● ΍·ͷ͘
    ● he / him
    ● Frontend Designer
    ● 🏡 👪 🐱 🐱 🐱 🐶
    ࣗݾ঺հ
    ΍·ͷ͘ͱਃ͠·͢ɻWeb σβΠφʔͱͯ͠ಇ͖ग़ͯ͠ɺϚʔΫΞοϓΤϯδχΞͱͯ͠ຊ֨త
    ʹ Web ٕज़ʹ৮Ε͸͡ΊɺΞΫηγϏϦςΟͷ෼໺ʹؔ৺ΛߴΊ͍͖ͯ·ͨ͠ɻ

    View full-size slide

  5. ● ΍·ͷ͘
    ● he / him
    ● Frontend Designer
    ● 🏡 👪 🐱 🐱 🐱 🐶
    ࣗݾ঺հ
    ݱࡏ͸ࣄۀձࣾʹॴଐ͠ɺWeb ඪ४ͷٕज़Λ׆༻ͯ͠
    ϢʔβʔମݧΛ޲্͍͖͍ͤͯͨ͞ͱߟ͍͑ͯΔऀͰ͢ɻ

    View full-size slide

  6. Vue.js ͱΞΫηγϏϦςΟ
    ࠓճͷ Vue Fes Japan Online 2022 Ͱ͸ Vue.js ͱΞΫηγϏϦςΟʹ
    ·ͭΘΔςʔϚͰൃද͍ͤͯͨͩ͘͞ͷͰ͕͢ɺ

    View full-size slide

  7. Vue.js ͱΞΫηγϏϦςΟ
    ͸͡Ίʹɺͳͥ͜ͷςʔϚͰൃද͢Δͷ͔Λઆ໌͠·͢ɻ

    View full-size slide

  8. Vue.js ͱΞΫηγϏϦςΟ
    ͦΕ͸ Vue.js Ͱͷ։ൃʹ͓͍ͯ
    ΞΫηγϏϦςΟΛߟྀ͢Δػձ͕গͳ͍ͷͰ͸ͳ͍͔ͱࢥ͔ͬͨΒͰ͢ɻ

    View full-size slide


  9. ΞΫηγϏϦςΟʹ͍ͭͯ؆୯ʹઆ໌͢Δͱɺ୭΋͕৘ใ΁ΞΫηεͰ͖ΔΑ͏ʹ͢Δߟ͑ํ
    ͰɺWeb ʹ͓͍ͯͦͷߟ͑ํΛ࣮ફ͢Δͷ͕ Web ΞΫηγϏϦςΟͱ͍͏΋ͷͰ͢ɻ

    View full-size slide

  10. ࠷ۙͷϑϩϯτΤϯυ։ൃʹ͓͍ͯɺ͜͜ʹ஫ྗͰ͖Δ͜ͱ͸
    αΠτ΍ϓϩμΫτͷՁ஋෇͚ɺଞͱͷࠩผԽ͕Ͱ͖ΔྖҬʹͳ͖͍ͬͯͯ·͢ɻ

    View full-size slide

  11. Vue3 ͷυΩϡϝϯτ͔ΒΞΫηγϏϦςΟʹؔ͢Δ߲໨͕௥Ճ͞Ε·ͨ͠ɻ
    ΞΫηγϏϦςΟͷجૅ΍ɺ࣮ࡍͷϢʔεέʔεͷҰ෦Λֶ΂Δίϯςϯπʹͳ͍ͬͯ·͢ɻ

    View full-size slide

  12. Vue2 ҎલͰ͸૲Ҋͱ͍͏ܗͰϚʔδ͞ΕΔ͜ͱͳ͘ऴΘͬͯ͠·ͬͨͷͰ
    ͜͏ͨ͠υΩϡϝϯτ͕௥Ճ͞Εͨ͜ͱ͸ྑ͍͜ͱͰ͢ɻ

    View full-size slide

  13. Ͱ͕͢ɺถࠃͷඇӦརஂମ WebAIM ͷௐࠪʹΑΔͱ
    Vue.js Λ༻͍ͨαΠτͰ͸ΞΫηγϏϦςΟରԠ͕଍Γ͍ͯͳ͍ͱ͍͏ใࠂ͕͕͍͋ͬͯ·͢ɻ

    View full-size slide

  14. ͜Ε͸ಛఆͷϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛ࢖͏͜ͱ͕ΞΫηγϒϧͱͳΒͳ͍ࣄͰ͸
    ͋Γ·ͤΜ͕ɺҰࡢ೥ɾڈ೥͔ΒରԠ͕ฏۉҎԼͱͳ͍ͬͯΔࣄ࣮͕͋Γ·͢ɻ

    View full-size slide

  15. ௐࠪ͞ΕͨαΠτʹ೔ຊͷ΋ͷؚ͕͍ͭ͘·Ε͍ͯΔ͔͸ఆ͔Ͱ͸͋Γ·ͤΜ͕
    Vue.js Ͱ։ൃΛ͢Δ਎ͱͯ͠ɺ͜ͷঢ়گ͕໺์͠ʹͳ͍͍ͬͯͱ͸ࢥ͍ͬͯ·ͤΜɻ

    View full-size slide

  16. ΞδΣϯμ
    ● ޡͬͨΞΫηγϏϦςΟରԠ


    ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ


    ● ΞΫηγϏϦςΟςετɾνΣοΫ
    ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢
    ͜ͷηογϣϯͰ͸̏ͭͷςʔϚʹԊͬͯɺࠓޙͷ Vue.js Ͱͷ։ൃͰ
    ΞΫηγϏϦςΟʹऔΓ૊Έ΍͘͢ͳΔ಺༰Λൃද͍ͨ͠·͢ɻ

    View full-size slide

  17. ΞδΣϯμ
    ● ޡͬͨΞΫηγϏϦςΟରԠ


    ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ


    ● ΞΫηγϏϦςΟςετɾνΣοΫ
    ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢
    ର৅͸ʮWeb ΞΫηγϏϦςΟΛֶͼ͸͡Ίͨਓʯ΍
    ʮVue.js ͰΞΫηγϏϦςΟͷ޲্Λ͍͖͍ͯͨ͠ਓʯ޲͚ʹͳΓ·͢ɻ

    View full-size slide

  18. ΞδΣϯμ
    ● ޡͬͨΞΫηγϏϦςΟରԠ


    ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ


    ● ΞΫηγϏϦςΟςετɾνΣοΫ
    ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢
    ͜ͷൃදΛ͖͔͚ͬʹɺࠓޙͷ Vue.js ։ൃʹ͓͚Δ
    ΞΫηγϏϦςΟ޲্ͷऔΓ૊Έʹܨ͕Ε͹ͱࢥ͓ͬͯΓ·͢ɻ

    View full-size slide

  19. ΞδΣϯμ
    ● ޡͬͨΞΫηγϏϦςΟରԠ


    ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ


    ● ΞΫηγϏϦςΟςετɾνΣοΫ
    ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢
    ͳ͓ࠓճͷࣄྫͰ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ɻ
    ͦͷ఺ɺྃ͝ঝ͍ͩ͘͞ɻ

    View full-size slide

  20. 1.
    ޡͬͨΞΫηγϏϦςΟରԠ

    View full-size slide

  21. 1.
    ޡͬͨΞΫηγϏϦςΟରԠ
    ΞΫηγϏϦςΟରԠͰ͸ɺ͋·ΓཧղͤͣʹΑ͔Εͱࢥͬͯ΍ͬͨ΋ͷ͕
    Կ΋Өڹ͕ͳ͔ͬͨΓɺͦΕͲ͜Ζ͔ѱ͘ͳΔ͜ͱ͕͋Γ·͢ɻ

    View full-size slide

  22. 1.
    ޡͬͨΞΫηγϏϦςΟରԠ
    ѱ͍ΞΫηγϏϦςΟରԠΛͳͨ͘͢Ίʹ΋
    Αؒ͘ҧ͍΍͍͢ରԠʹ͍ͭͯઌʹֶΜͰ͍͖·͠ΐ͏ɻ

    View full-size slide

  23. ΞΫηγϏϦςΟΛҙࣝ͢ΔΑ͏ʹͳ͔ͬͯΒ
    WAI-ARIA ʹ͍ͭͯ஌ͬͨਓ͸ଟ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  24. WAI-ARIA ͸εΫϦʔϯϦʔμʔͱ͍ͬͨࢧԉٕज़΁
    HTML ͚ͩͰ͸දݱ͖͠Εͳ͍ΞΫηγϒϧͳ৘ใΛิ׬͢Δٕज़࢓༷Ͱ͢ɻ

    View full-size slide

  25. ϒϥ΢β͔Β DOM πϦʔͱ CSS ͷϨϯμϦϯάΛղੳͯ͠
    ΞΫηγϏϦςΟʹؔ͢Δ৘ใ͕ΞΫηγϏϦςΟπϦʔʹ൓ө͞Ε·͢ɻ

    View full-size slide

  26. ͦͯ͠ OS ͝ͱͷΞΫηγϏϦςΟ API ͔Βࢧԉٕज़΋ͬͯϢʔβʔʹ৘ใ͕ಧ͖·͢ɻ

    View full-size slide

  27. WAI-ARIA ͸͜ͷΞΫηγϏϦςΟπϦʔͷதͰ
    ೝ஌Ͱ͖ΔΑ͏ʹҙຯ͚ͮͯ͋͛͠Δͱ͍͏ܗͰ͢ɻ

    View full-size slide

  28. 💪
    WAI-ARIA Λ࢖͏͜ͱͰΞΫηγϏϦςΟΛߴΊΔ͜ͱ͕Ͱ͖Δͱ࢖͍ग़͢ਓ͕͍·͢ɻ
    ࢲ΋ͦͷ̍ਓͰͨ͠ɻ

    View full-size slide

  29. 💪
    Ͱ͕͢ WAI-ARIA Λ࢖༻͢ΔʹลΓؾΛ͚ͭͳ͚Ε͹ͳΒͳ͍͜ͱ͕͋Γ·͢ɻ

    View full-size slide

  30. ͦΕ͸ʮNO ARIA is better than BAD ARIAʢARIA ແ͠ͷ΄͏͕ɺѱ͍ ARIA ΑΓ΋ྑ͍ʣʯ
    ͱ͍͏͜ͱͰ͢ɻ
    “NO ARIA is better than BAD ARIA”
    WAI-ARIA Authoring Practices 1.1

    View full-size slide

  31. “NO ARIA is better than BAD ARIA”
    WAI-ARIA Authoring Practices 1.1
    ͭ·ΓɺWAI-ARIA Λؒҧͬͯ࢖͏͘Β͍ͳΒ
    ͦΕΛ࢖Θͳ͍΄͏͕·ͩΞΫηγϏϦςΟͱͯ͠ϚγͰ͋Δͱ͍͏͜ͱͰ͢ɻ

    View full-size slide

  32. ࠓճ͸ͦΜͳ WAI-ARIA ͷ࢖༻ʹ͍ͭͯɺ
    ։ൃ࣌ʹޡΓ΍͍͢΋ͷ΍ҙࣝ͠๨Ε͕ͪͳ෦෼ʹ͍ͭͯ঺հ͠·͢ɻ
    “NO ARIA is better than BAD ARIA”
    WAI-ARIA Authoring Practices 1.1

    View full-size slide

  33. aria-label
    ·ͣ͸ aria-labelɻ
    ͪ͜Β͸ࢧԉٕज़ʹ఻͍͑ͨςΩετ৘ใ͕͋Δ৔߹ʹ࢖༻͞ΕΔ΋ͷͰ͢ɻ

    View full-size slide

  34. ۩ମྫͱͯ͠͸ΞΠίϯ͚ͩͷϘλϯ͕ڍ͛ΒΕ·͢ɻ
    ͜ͷύλʔϯͰ͸Ϙλϯ಺ʹςΩετ͕ͳ͍ͨΊʮϝχϡʔɺϘλϯ ʯͱͯ͠ೝࣝ͞Ε·͢ɻ

    View full-size slide

  35. Ͱ͸͜ͷύλʔϯͰ͸Ͳ͏ͳΔͰ͠ΐ͏͔ɻ

    View full-size slide

  36. ϦϯΫͷ಺෦ʹը૾ςΩετ͕͋Δ৔߹Ͱ͕͢
    ͜Ε͸ alt ͷ৘ใΛ্ॻ͖ͯ͠ʮϦϯΫɺΠϝʔδɺVueʯͱಡ·Εͯ͠·͍·͢ɻ

    View full-size slide

  37. ·ͨɺ͜ͷ৔߹͸ label ཁૉΛແޮԽͯ͠
    ʮೖྗϑΥʔϜɺςΩετΛฤूʯͱಡ·Εͯ͠·͍·͢ɻ

    View full-size slide

  38. ͜ͷΑ͏ʹ aria-label ͸ຊདྷ఻͔͑ͨͬͨςΩετ৘ใΛ্ॻ͖ͯ͠͠·͏͜ͱ͕͋Γ·͢ɻ

    View full-size slide

  39. aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏
    ● ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍
    ● ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ
    ● WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ
    ○ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর
    ࢧԉٕज़ͷϢʔβʔ͚ͩҧ͏৘ใΛ༩͑ͯ͠·͏ͷͰ͸ͳ͘
    ͋ΒΏΔਓʹಉ౳ͷ৘ใΛ༩͑ΔͨΊʹɺͰ͖ΔݶΓݟ͑ΔςΩετͰఏڙ͍ͯͩ͘͠͞ɻ

    View full-size slide

  40. aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏
    ● ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍
    ● ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ
    ● WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ
    ○ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর
    ͪͳΈʹ aria-label ͸ WAI-ARIA 1.2 ΑΓ div ཁૉ΍ span ཁૉͱ͍ͬͨ generic role ͳͲɺ
    ໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯ·͢ɻৄࡉ͸࢓༷ΛνΣοΫͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  41. aria-hidden
    ࣍͸ aria-hidden ʹ͍ͭͯɻ

    aria-hidden ͸ͦͷཁૉͱ͢΂ͯͷࢠཁૉΛΞΫηγϏϦςΟπϦʔ͔Β࡟আ͢Δ΋ͷͰ͢ɻ

    View full-size slide

  42. ۩ମྫͱͯ͠͸ࢧԉٕज़ʹ఻͑ͳͯ͘ྑ͍૷০తͳཁૉ΍ॏෳ͍ͯ͠Δίϯςϯπɺ
    Ϟʔμϧ͕දࣔ͞Εͨͱ͖ʹͦΕҎ֎ͷίϯςϯπΛӅ͢ͱ͖ͳͲ͕ڍ͛ΒΕ·͢ɻ

    View full-size slide

  43. aria-hidden ͸ͱͯ΋ڧྗͳ΋ͷͳͷͰ
    ࢖͏৔߹͸ӨڹൣғΛ͖ͪΜͱ೺Ѳ্ͨ͠Ͱ࢖͍·͠ΐ͏ɻ

    View full-size slide

  44. ͨͱ͑͹ϞʔμϧΛϥοϓ͢Δ਌ཁૉʹ aria-hidden Λ࢖ͬͯ͠·͏ͱ
    ϞʔμϧΛؚΊͯ͢΂ͯӅ͞Εͯ͠·͏͔ΒͰ͢ɻ

    View full-size slide

  45. ͔ͤͬ͘ͷࢧԉٕज़αϙʔτ͕ແବʹͳͬͯ͠·͍·͢ɻ

    View full-size slide

  46. ·ͨɺϑΥʔΧεͤ͞Δཁૉ΍ͦΕΛ಺แ͢Δཁૉʹ࢖༻͠ͳ͍Α͏ʹؾΛ͚͍ͭͯͩ͘͞ɻ
    ϑΥʔΧεࣗମ͸Ͱ͖ͯ΋ͦͷཁૉ͕Կͳͷ͔ೝࣝͰ͖ͳ͘ͳΔ͔ΒͰ͢ɻ

    View full-size slide

  47. Ұ࣌తʹӅ͢ͷͰ͸ͳ͘׬શʹཁૉΛফ͍ͨ͠৔߹
    CSS Ͱͷ display: none ΍ hidden ଐੑΛ࢖͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  48. aria-live
    ࣍͸ aria-live ʹ͍ͭͯɻ͜Ε͸ϥΠϒϦʔδϣϯͱݺ͹ΕΔ΋ͷͰ
    ϖʔδ಺ͰಈతͳมԽ͕͋ͬͨ৔߹ɺͦΕΛࢧԉٕज़΁఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ

    View full-size slide

  49. ۩ମྫͱͯ͠͸ɺϑΥʔϜೖྗʹมԽ͕͋ͬͨࡍ΍ SPA ʹ͓͚Δը໘ભҠ࣌ɺ
    ܯࠂͷ௨஌΍ΧϧʔηϧͷมԽ࣌ͳͲ͕ڍ͛ΒΕ·͢ɻ

    View full-size slide

  50. ● polite
    ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ
    ● assertive
    ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ
    ● off
    ○ Կ΋௨஌ͤ͞ͳ͍
    ○ σϑΥϧτͷ஋
    aria-live ͷ஋
    ௨ৗͷ௨஌Ͱ͋Ε͹
    ಈ࡞͕׬͔ྃͯ͠ΒಡΈ্͛ͯ͘ΕΔ aria-live=“polite" Ͱઃఆ͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  51. ● polite
    ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ
    ● assertive
    ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ
    ● off
    ○ Կ΋௨஌ͤ͞ͳ͍
    ○ σϑΥϧτͷ஋
    aria-live ͷ஋
    aria-live="assertive" ͸ಈతͳมߋ͕͋Δࡍʹଞͷૢ࡞ΛׂΓࠐΜͰ௨஌͖ͯ͠·͢ɻ
    ͜Ε͸Ξϥʔτͱͯ͠ͷ໾ׂͰ͋Ε͹Α͍ͷͰ͕͢ɺ

    View full-size slide

  52. ● polite
    ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ
    ● assertive
    ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ
    ● off
    ○ Կ΋௨஌ͤ͞ͳ͍
    ○ σϑΥϧτͷ஋
    aria-live ͷ஋
    ࣗಈతʹ੾ΓସΘΔΧϧʔηϧ΍ϑΥʔϜೖྗதʹৗʹ৘ใΛ௨஌͖ͯͨ͠Β
    ஶ͘͠ϢʔβମݧΛଛͶͯ͠·͏ͷͰɺޡͬͨ஋Ͱ࢖༻͠ͳ͍Ͱ͍ͩ͘͞ɻ

    View full-size slide

  53. aria-current
    ࠷ޙʹ aria-current ʹ͍ͭͯɻ
    ͪ͜Β͸ݱࡏͷҐஔΛ఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ

    View full-size slide

  54. ࢖༻ྫͱͯ͠͸ϖʔδωʔγϣϯ΍φϏήʔγϣϯɺ
    ύϯͣ͘ͷϦϯΫʹ͓͍ͯݱࡏͷ߲໨Λ఻͑Δͱ͖ʹ࢖༻͞Ε·͢ɻ

    View full-size slide

  55. ୯ମͷ WAI-ARIA ͱͯ͠͸͜Ε·Ͱઆ໌ͨ͠΋ͷͱൺֱ͢Δͱ
    සൟʹ࢖͏ػձ͸গͳ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  56. Ͱ͕͢ɺVue.js Ͱ։ൃ͢ΔਓͰ͋Ε͹Α͘ݟ͔͚ΔϥΠϒϥϦͰ࢖༻͞Ε͍ͯ·͢ɻ

    View full-size slide

  57. ͦΕ͸ Vue Router Ͱ͢ɻ

    View full-size slide

  58. router-link Ͱ࢖༻͞ΕΔ͜ͱ΋͋Ε͹
    Nuxt.js ͷඪ४ϦϯΫίϯϙʔωϯτͰ͋Δ nuxt-link Ͱ΋࢖༻͞Ε͍ͯ·͢ɻ

    View full-size slide

  59. ݱࡏͷ URL ύεͱ߹க͢ΔϦϯΫઌ͕ઃఆ͞Ε͍ͯΔ৔߹
    ͦͷϦϯΫʹ͸ aria-current="page" ͕෇༩͞Ε·͢ɻ

    View full-size slide

  60. ϦϯΫςΩετࣗମ͕ͦͷϖʔδλΠτϧͱ߹க͍ͯ͠Ε͹༗༻ͳ࢖͍ํͱݴ͑·͢ɻ

    View full-size slide

  61. Ͱ͕͢͜ͷཁૉΛແ࡞ҝʹஔ͍ͯ͠·͍ͬͯΔͱ
    Կ͕ݱࡏҐஔͷ΋ͷͰ͋Δ͔ͷ৘ใ͕൥ࡶʹͳͬͯ͠·͍·͢ɻ

    View full-size slide

  62. ϚʔΫΞοϓ͢Δࡍʹ͸ϦϯΫΛͲ͏͍ͬͨάϧʔϐϯάʹ͢Δ͔
    ஔ͘ྖҬΛҙࣝ͠·͠ΐ͏ɻ

    View full-size slide

  63. ͪͳΈʹ Vue Router ʹ͸ aria-current ෦෼Λ API ͱ੍ͯ͠ޚͰ͖·͢ɻ

    View full-size slide

  64. ஋͸ෳ਺ଘࡏ͓ͯ͠Γɺεςοϓ΍೔෇ɺݱࡏ࣌ࠁͷ৘ใΛࣔ͢͜ͱ͕ՄೳͰ͢ɻ
    aria-current ͷ஋͕ҙਤͨ͠΋ͷͱͳ͍ͬͯΔ͔֬ೝͯ͠Έ·͠ΐ͏ɻ

    View full-size slide

  65. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ


    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ


    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ


    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ


    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ


    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ


    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ


    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ͜ͷΑ͏ʹ WAI-ARIA ͸ཁૉʹΑͬͯ͸ͦͷ··࢖༻Ͱ͖ͳ͍΋ͷ͕͋ͬͨΓ
    ஌Βͣʹ࢖͏͜ͱͰΞϓϦέʔγϣϯʹӨڹΛ༩͑͏Δ΋ͷ͕͋Γ·͢ɻ

    View full-size slide

  66. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ


    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ


    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ


    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ


    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ


    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ


    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ


    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ࢖༻ํ๏ΛޡΔ͜ͱͰ؆୯ʹΞΫηγϒϧͰ͸ͳ͍΋ͷΛ࡞Γ্͛ͯ͠·͍·͢ɻ

    View full-size slide

  67. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ


    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ


    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ


    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ


    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ


    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ


    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ


    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ҰํͰ HTML Λ࢖͏͜ͱ͸ϒϥ΢βඪ४ʹ͓͍ͯಉҰͷڍಈ͕͓͓Αͦอূ͞Ε͍ͯ·͢ɻ

    View full-size slide

  68. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ


    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ


    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ


    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ


    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ


    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ


    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ


    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    WAI-ARIA ΛΑ͘Θ͔Βͣ࢖ͬͯ͠·͍ͦ͏ͳ࣌͸Ұ୴ཱͪࢭ·ͬͯ
    ͦΕΒΛ࢖Θͣʹ HTML ͚ͩͰදݱͰ͖ͳ͍͔ͱ͍͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  69. ։ൃऀ޲͚ͷ Web ٕज़ͷ৘ใ͕ू໿͞Ε͍ͯΔ MDN Web Docs ʹ͸
    HTML ཁૉͷϖʔδͰΞΫηγϏϦςΟ্ͷݒ೦఺͕ࡌ͍ͬͯ·͢ɻ

    View full-size slide

  70. ීஈॻ͍͍ͯΔ HTML ͷ࢖͍ํ͕ؒҧͬͯͳ͍͔Λཧղ͢Δ্Ͱ༗ӹͳαΠτͰ͢ɻ

    View full-size slide

  71. ·ͨɺHTML ΛΑΓৄࡉʹֶͿͷͰ͋Ε͹ʮHTML ղମ৽ॻʯ΋Φεεϝ͠·͢ɻ

    View full-size slide

  72. ݱ࣌఺Ͱ΋ͬͱ΋ HTML ͷ࢓༷ॻʹີ઀ͳ೔ຊޠͷॻ੶Ͱ͢ͷͰ
    ࣮૷΍ϨϏϡʔ࣌ͷϦϑΝϨϯεͱͯ͠΋׆༻ͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  73. 2.
    ൚༻ੑͷ͋Δ

    ΞΫηγϒϧͳίϯϙʔωϯτ

    View full-size slide

  74. 2.
    ൚༻ੑͷ͋Δ

    ΞΫηγϒϧͳίϯϙʔωϯτ
    ઌఔͷࣄྫΑΓ WAI-ARIA ͸৻ॏʹ࢖͏ඞཁ͕͋Δ͜ͱΛઆ໌͍ͨ͠·ͨ͠ɻ
    Ͱ͕ͦ͢ΕΒΛ͍͍ͪͪ֬ೝ͠ͳ͕Βͷ։ൃ͸େมͰ͢ɻ

    View full-size slide

  75. 2.
    ൚༻ੑͷ͋Δ

    ΞΫηγϒϧͳίϯϙʔωϯτ
    ͦ͜ͰίϯϙʔωϯτઃܭͰϧʔϧΛ಺แͤ͞Δ͜ͱͰ
    νʔϜ։ൃʹ͓͍ͯೝࣝͷᴥᴪΛݮΒͨ͠։ൃ͕͠΍͘͢ͳΓ·͢ɻ

    View full-size slide

  76. 2.
    ൚༻ੑͷ͋Δ

    ΞΫηγϒϧͳίϯϙʔωϯτ
    ࣍͸൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ࡞Γʹؔ͢ΔώϯτΛ঺հ͠·͢ɻ

    View full-size slide

  77. TypeScript Ͱิڧ͢Δ
    Vue3 ͔Β͸ TypeScript ରԠ͕վળ͞Ε͖ͯ·ͨ͠ɻ
    ͜ΕΛظʹಋೖͩͨ͠͠ਓ΋͍ΔͰ͠ΐ͏ɻ

    View full-size slide

  78. TypeScript Ͱิڧ͢Δ
    ΋͠ಋೖ͍ͯ͠Δ৔߹
    ΞΫηγϒϧͳίϯϙʔωϯτ࡞ΓΛิڧ͢ΔͨΊʹ༗༻ͳखஈͱͳΓ·͢ɻ

    View full-size slide

  79. ͜ͷύλʔϯͰ͸ݟग़͠ίϯϙʔωϯτΛ൚༻తʹ࢖͑ΔΑ͏࣮૷͠·ͨ͠ɻ

    View full-size slide

  80. ཁૉʹ͸ is ଐੑʹΑͬͯ͋ΒΏΔཁૉΛೖΕΒΕΔͨΊ
    ͦΕΒΛ props ͷ஋͔Β੍ޚ͢Δܗʹ͍ͯ͠·͢ɻ

    View full-size slide

  81. ͜ΕҎ֎ʹ΋ը૾ίϯϙʔωϯτͷΑ͏ͳ৔߹͸୅ସςΩετͱͳΔ props Λઃஔͨ͠Γ
    ଟݴޠରԠͷࡍ͸ lang ଐੑʹ͋ͨΔ΋ͷΛ props ʹઃஔ͢ΔͳͲ

    View full-size slide

  82. ͸͡ΊͯίϯϙʔωϯτΛ࢖͏ਓʹ΋ඞཁͩͱ෼͔Δ props Λఆ͓ٛͯ͘͠ͱΑ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  83. ·ͨ vue-tsc ͱ͍ͬͨܕݕࠪπʔϧΛ࢖༻͢Δͱ
    ಺ͷଐੑ஋΋νΣοΫͯ͘͠Ε·͢ɻ

    View full-size slide

  84. ͜͜Ͱؒҧͬͨ஋͕ೖ͍ͬͯͳ͍͔΋஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  85. Visually Hidden
    Visually Hidden ͱ͸ࢹ֮తʹ͸֬ೝͰ͖ͳ͍͕ࢧԉٕज़ʹΑΓ֬ೝͰ͖Δํ๏Ͱ͢ɻ
    Bootstrap ͱ͍֤ͬͨछ UI ϑϨʔϜϫʔΫͰఆٛ͞Ε͍ͯͨΓ͠·͢ɻ

    View full-size slide

  86. લड़ͨ͠ aria-label ͱ΋ࣅ͍ͯ·͕͢
    ͜ͷΑ͏ͳίϯϙʔωϯτͱ͢Δ͜ͱͰ൚༻తʹ࢖͍ճͤ·͢ɻ

    View full-size slide

  87. ςΩετ͕ͳ͍৔߹ͷ Button ίϯϙʔωϯτ΍ɺ
    ϑΥʔϜύʔπͷϥϕϧ෦෼ΛӅ͢৔߹ͳͲʹ׆༻͢Δ͜ͱ͕Ͱ͖·͢ɻ

    View full-size slide

  88. ·ͨɺCSS ͷ੍ޚΑͬͯϑΥʔΧε͢Δ৔߹͸දࣔͤ͞Δ͜ͱ͕Ͱ͖·͢ɻ

    View full-size slide

  89. ͜Ε͸ʮεΩοϓϦϯΫʯͱ͍͏ɺίϯςϯπʹεΩοϓҠಈͰ͖Δ
    ࢧԉٕज़ϢʔβʔͷͨΊͷखஈͱͯ͠࢖༻Ͱ͖·͢ɻ

    View full-size slide

  90. ௨ৗɺը໘্ʹ͸ݱΕ·ͤΜ͕
    ϔομʔͷ಺༰͕ଟ͍৔߹ʹίϯςϯπʹ௚઀εΩοϓͰ͖ΔΑ͏ʹ͢Δ΋ͷͰ͢ɻ

    View full-size slide

  91. Fragments
    Vue3 ͔Β͸ Fragments ͱ͍͏֓೦͕ಋೖ͞Ε͍ͯ·͢ɻ

    View full-size slide

  92. Vue2 ·Ͱ͸ ಺ͷϧʔτཁૉ͸୯Ұͷ΋ͷͰͳ͚Ε͹ͳΓ·ͤΜͰͨ͠ɻ
    ͦΕʹΑΓίϯϙʔωϯτʹΑͬͯ͸ϚʔΫΞοϓ͕ؒҧ͍ͬͯΔ৔߹͕͋Γ·ͨ͠ɻ

    View full-size slide

  93. Fragments ʹΑΓϧʔτ͕୯ҰͰͳͯ͘΋Α͘ͳΓ
    ίϯϙʔωϯτʹ͓͚ΔϚʔΫΞοϓͷਖ਼͕͠͞อূ͞Ε΍͘͢ͳΓ·ͨ͠ɻ

    View full-size slide

  94. ͨͩ͠ίϯϙʔωϯτͷϧʔτཁૉʹ
    ਌ίϯϙʔωϯτ͔ΒͷଐੑΛࣗಈతʹ෇༩͞Εͳ͘ͳΔ͜ͱʹ͸஫ҙͰ͢ɻ

    View full-size slide

  95. ͦͷ৔߹͸ inheritAttrs Λ false ʹͯ͠
    ଐੑΛड͚औΔཁૉʹ v-bind="$attrs" Λ෇༩͓͖ͯ͠·͠ΐ͏ɻ

    View full-size slide

  96. 3.
    ΞΫηγϏϦςΟ
    ςετɾνΣοΫ

    View full-size slide

  97. 3.
    ΞΫηγϏϦςΟ
    ςετɾνΣοΫ
    ΞΫηγϒϧͳίϯϙʔωϯτ͕࡞ΕͨͰ͠ΐ͏͔ɻ
    ͱͯ΋ૉ੖Β͍͠Ͱ͢Ͷɻ

    View full-size slide

  98. 3.
    ΞΫηγϏϦςΟ
    ςετɾνΣοΫ
    Ͱ͕͢ɺίϯϙʔωϯτΛ࡞Δ͜ͱҎ্ʹେ੾ͳ͜ͱ͕͋Γ·͢ɻ
    ͦΕ͸͖ͪΜͱಈ࡞͍ͯ͠Δ͔Λ֬ೝ͢Δ͜ͱͰ͢ɻ

    View full-size slide

  99. 3.
    ΞΫηγϏϦςΟ
    ςετɾνΣοΫ
    ͱ͍͏Θ͚Ͱɺ࡞ͬͨίϯϙʔωϯτ͕ຊ౰ʹ໰୊ͳ͍͔Λ֬ೝ͢ΔͨΊʹ
    ςετ΍νΣοΫΛ͍͖ͯ͠·͠ΐ͏ɻ

    View full-size slide

  100. Linter
    ·ͣ͸ɺ੩తղੳπʔϧͰνΣοΫͯ͠Έ·͠ΐ͏ɻ

    View full-size slide

  101. eslint Λಋೖ͍ͯ͠ΔͳΒ eslint-plugin-vuejs-accessibility Λ࢖༻͢Δ͜ͱΛΦεεϝ͠·͢ɻ

    View full-size slide

  102. ͪ͜Β͸ Vue.js ίʔυ಺ͰΞΫηγϏϦςΟΛଛͶΔίʔυ͕͋ͬͨ৔߹ʹ
    ࢦఠͯ͘͠ΕΔ eslint plugin Ͱ͢ɻ

    View full-size slide

  103. ߏங͢ΔαΠτ΍ΞϓϦέʔγϣϯʹΑͬͯ͸ෆཁͳϧʔϧ͕͋Δ͔΋͠Ε·ͤΜɻ
    ಋೖલʹԿͷϧʔϧΛ༗ޮʹ͢Δ͔Λݕ౼͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  104. ΑΓϚʔΫΞοϓʹ޲͖߹ͬͯ HTML ͷਖ਼֬͞Λ֬ೝ͍ͨ͠৔߹ɺ
    markuplint Λಋೖͯ͠ΈΔ͜ͱ΋༗༻Ͱ͢ɻ

    View full-size slide

  105. Vue.js ͷύʔαʔ͕ଘࡏ͢ΔͷͰซͤͯ࢖͏͜ͱͰ
    vue ίϯϙʔωϯτ಺ΛνΣοΫͯ͘͠Ε·͢ɻ

    View full-size slide

  106. ͨͩ͠ markuplint ͸ɺಈతόΠϯσΟϯάͳଐੑͱͳ͍ͬͯΔ৔߹͸
    ಺༰ΛධՁͰ͖ͳ͍ͨΊɺεϧʔ͞Εͯ͠·͍·͢ɻ

    View full-size slide

  107. ͜ͷ৔߹ɺલड़ͨ͠ TypeScript Ͱͷܕఆٛ΍
    props Ͱ਌͔Βਖ਼͍͠಺༰Λड͚औΔΑ͏ʹͨ͠Γɺ

    View full-size slide

  108. ੩తͳ HTML ͷग़ྗ࣌΍ɺεφοϓγϣοτςετͷ HTML Λ΋ͱʹ
    markuplint ͰνΣοΫ͢ΔͱΑ͍Ͱ͠ΐ͏ɻ

    View full-size slide

  109. ݁߹ςετ
    ϑϩϯτΤϯυͷςετͷͨΊʹ Jest Λಋೖ͍ͯ͠·͢Ͱ͠ΐ͏͔ɻ
    ͩͱ͢Δͱ͋ͳͨ͸ϥοΩʔͰ͢ɻ

    View full-size slide

  110. ݁߹ςετ
    testing-library Λ࢖ͬͯࢧԉٕज़ϢʔβʔΛ૝ఆͨ͠ৼΔ෣͍ͷ
    ݁߹ςετΛॻ͍ͯΈ·͠ΐ͏ɻ

    View full-size slide

  111. ͜ͷςετέʔεͰ͸ getByRole Λ༻͍ͯཁૉͷ role Λऔಘ͠
    ಺෦ͷςΩετΛ֬ೝ͢ΔΑ͏ʹ͍ͯ͠·͢ɻ

    View full-size slide

  112. ߋʹΩʔϘʔυςετΛͯ͘͠ΕΔ testing-library ֦ுػೳΛ࢖͍ɺ
    ਖ਼͘͠ػೳ͍ͯ͠Δ͔ΛνΣοΫ͍ͯ͠·͢ɻ

    View full-size slide

  113. userEvent ʹͯλϒҠಈͤͨ͞ΓΫϦοΫͤ͞Δ͜ͱ΋Ͱ͖·͕͢ɺ
    ͪ͜Βͷ৔߹͕؆ܿͰཧղ͠΍͍͢ܗʹͳΓ·͢ɻ

    View full-size slide

  114. ͞Βʹ jest-axe Λ࢖༻͢Δ͜ͱͰ
    શମతʹΞΫηγϏϦςΟҧ൓͕ͳ͍͔ΛνΣοΫ͢Δ͜ͱ΋ग़དྷ·͢ɻ

    View full-size slide

  115. ͜Ε͸ axe ͱ͍͏ΞΫηγϏϦςΟݕূϥΠϒϥϦͷΤϯδϯΛ࢖༻ͨ͠
    Jest ͷ matcher Ͱ͢ɻ

    View full-size slide

  116. eslint ಉ༷ɺϧʔϧ͸ಠࣗͰௐ੔Ͱ͖ΔͷͰ
    ඞཁʹԠͯ͡ਫ਼ࠪͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  117. ϒϥ΢βɾࢧԉٕज़νΣοΫ
    ςετίʔυΛ΋ͬͯΞΫηγϏϦςΟͷਖ਼͠͞Λ֬ೝͰ͖ͨͷͳΒ
    ࣍͸࣮ࡍͷϒϥ΢β΍ࢧԉٕज़Ͱ΋νΣοΫͯ͠Έ·͠ΐ͏ɻ

    View full-size slide

  118. vue-axe ͸ϒϥ΢β্ͰΞΫηγϏϦςΟνΣοΫ͕Ͱ͖ΔΑ͏ʹͳΔϓϥάΠϯͰ͢ɻ
    Vue.js ͷ։ൃ಺ʹ૊ΈࠐΉ͜ͱ͕Ͱ͖ɺҧ൓͍ͯ͠ΔՕॴ͕ͳ͍͔Λࢦఠͯ͘͠Ε·͢ɻ

    View full-size slide

  119. ϩʔΧϧ։ൃΛ͠ͳ͕Βɺ໰୊఺Λ௵͍ͯ͘͠ࡍʹ༗༻ͳϓϥάΠϯͰ͢ɻ
    ίϯτϥετൺΛؚΉɺίʔυ্Ͱ͸ؾ͚ͮͳ͔ͬͨ෦෼ʹ஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ

    View full-size slide

  120. ΩʔϘʔυૢ࡞ͷ֬ೝ
    ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔
    ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ
    ● ϑΥʔΧεॱংͷՄࢹԽ
    ○ taba11y
    ○ Firefox DevTools
    ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ
    ઌ΄ͲͷςετͰΩʔϘʔυͷૢ࡞ʹ͍ͭͯهड़͍ͯ͠·͕ͨ͠
    ࣮ࡍͷϒϥ΢βͰΩʔϘʔυૢ࡞͕Ͱ͖Δ͔΋֬ೝͯ͠Έ·͠ΐ͏ɻ

    View full-size slide

  121. ΩʔϘʔυૢ࡞ͷ֬ೝ
    ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔
    ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ
    ● ϑΥʔΧεॱংͷՄࢹԽ
    ○ taba11y
    ○ Firefox DevTools
    ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ
    ϑΥʔϜཁૉ΍ϦϯΫͳͲͰ͸λϒΩʔͰͷભҠ΍ૢ࡞͕Ͱ͖Δ͔νΣοΫͯ͠Έ·͠ΐ͏ɻ
    ΋͘͠͸ E2E ςετΛ௨ͯ͠ϑΥʔΧεͷڍಈΛνΣοΫͯ͠ΈΔͷ΋Α͍Ͱ͠ΐ͏ɻ

    View full-size slide

  122. ΩʔϘʔυૢ࡞ͷ֬ೝ
    ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔
    ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ
    ● ϑΥʔΧεॱংͷՄࢹԽ
    ○ taba11y
    ○ Firefox DevTools
    ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ
    ૝ఆͨ͠ॱংʹϑΥʔΧεͰ͖ΔΑ͏ʹͳ͍ͬͯΔ͔Λ֬ೝ͠·͠ΐ͏ɻ
    taba11y ͱ͍͏֦ுػೳΛ࢖͏͜ͱͰϒϥ΢β্ͰϑΥʔΧεॱংΛՄࢹԽͯ͘͠Ε·͢ɻ

    View full-size slide

  123. ΩʔϘʔυૢ࡞ͷ֬ೝ
    ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔
    ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ
    ● ϑΥʔΧεॱংͷՄࢹԽ
    ○ taba11y
    ○ Firefox DevTools
    ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ
    ͪͳΈʹ Firefox ͷ DevTools Ͱ͸
    ඪ४ͷػೳͰϑΥʔΧεॱংΛ֬ೝͰ͖ΔΑ͏ʹͳ͍ͬͯ·͢ɻ

    View full-size slide

  124. εΫϦʔϯϦʔμʔ
    ● Windows OSʮφϨʔλʔʯ
    ● macOS ˍ iOSʮVoiceOverʯ
    ● AndroidʮTalkBackʯ
    ● NVDA

    ● ࢧԉٕज़ࣗಈςετ༻πʔϧ
    ○ Guidepup
    ○ web-test-runner-voiceover
    ○ VoiceOver.js
    ࢧԉٕज़ͷ̍ͭͰ΋͋ΔεΫϦʔϯϦʔμʔʹ͓͍ͯ
    ࣮ࡍʹͲ͏࢖ΘΕΔ͔΋νΣοΫ͓͖ͯ͠·͠ΐ͏ɻ

    View full-size slide

  125. εΫϦʔϯϦʔμʔ
    ● Windows OSʮφϨʔλʔʯ
    ● macOS ˍ iOSʮVoiceOverʯ
    ● AndroidʮTalkBackʯ
    ● NVDA

    ● ࢧԉٕज़ࣗಈςετ༻πʔϧ
    ○ Guidepup
    ○ web-test-runner-voiceover
    ○ VoiceOver.js
    Windows ΍ macOSɺεϚʔτϑΥϯ OS ʹ͸ඪ४ͰεΫϦʔϯϦʔμʔ͕౥ࡌ͞Ε͍ͯ·͢ɻ
    Windows ͷΈͰ͕͢ OSS Ͱެ։͞Ε͍ͯΔ NVDA ͱ͍͏εΫϦʔϯϦʔμʔ΋͋Γ·͢ɻ

    View full-size slide

  126. εΫϦʔϯϦʔμʔ
    ● Windows OSʮφϨʔλʔʯ
    ● macOS ˍ iOSʮVoiceOverʯ
    ● AndroidʮTalkBackʯ
    ● NVDA

    ● ࢧԉٕज़ࣗಈςετ༻πʔϧ
    ○ Guidepup
    ○ web-test-runner-voiceover
    ○ VoiceOver.js
    ·ͨɺҰ෦ͷࢧԉٕज़ͷΈͰ͕͢
    ࣗಈςετͱ࣮ͯ͠ࢪͰ͖ΔͨΊͷπʔϧ΋ެ։͞Ε͍ͯ·͢ɻ

    View full-size slide

  127. ͓ΘΓʹ
    ࠓճ঺հͨ͜͠ͱҎ֎Ͱ΋ΞΫηγϏϦςΟʹߟྀ͢Δ͜ͱ͸͍ͭ͘΋͋Γ·͢ɻ
    ϑϩϯτΤϯυ։ൃͰ͚ͩߟྀ͢Ε͹Α͍΋ͷͰ͸͋Γ·ͤΜɻ

    View full-size slide

  128. ͓ΘΓʹ
    Ͱ͕͢ɺΞΫηγϏϦςΟରԠͱ͍͏΋ͷʹ׬ᘳͳ΋ͷ͸ͳ͍ͷͰɺ
    ؒҧ͍Λݟ͚ͭͨΒযΒͣʹ࣮֬ʹ௚͍ͯ͘͜͠ͱ͕େ੾Ͱ͢ɻ

    View full-size slide

  129. ͞Βʹ Vue.js ։ൃͱΞΫηγϏϦςΟͷྖҬʹ଍Λ౿ΈೖΕͨ͘ͳΓ·͔ͨ͠ɻ

    View full-size slide

  130. Web ΞΫηγϏϦςΟεϖγϟϦετͷ Marcus ࢯ͕
    Accessible Vue ͱ͍͏ίϯςϯπΛແྉͰެ։͍ͯ͠·͢ɻ

    View full-size slide

  131. ΑΓ୳ٻ͍͖͍ͯͨ͠ਓ͸ͪ͜Β΋ซͤͯ͝ཡʹͳͬͯΈ͍ͯͩ͘͞ɻ

    View full-size slide

  132. ࠓճͷൃද͔ΒΞΫηγϏϦςΟΛҙࣝͨ͠ Vue.js ։ൃ͕૿͍͖͑ͯ
    ΞΫηγϒϧͳαΠτ΍ΞϓϦέʔγϣϯ͕ੜ·Ε͍͚ͯΕ͹ͱࢥ͓ͬͯΓ·͢ɻ

    View full-size slide

  133. Thanks for listening!
    Vue Fes Japan Online 2022 - 2022/10/16
    Ҏ্ͰൃදΛऴΘΓ·͢ɻ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

    View full-size slide