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

Vue Fes Japan Online 2022 発表資料（Web 版）

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

Transcript

1. Vue.js Ͱ
   

   ΞΫηγϒϧͳ
   
   
   ίϯϙʔωϯτΛͭ͘ΔͨΊʹ
   Vue Fes Japan Online 2022 - 2022/10/16
   

   View Slide

2. Vue.js Ͱ
   

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. ΞδΣϯμ
    ● ޡͬͨΞΫηγϏϦςΟରԠ
    
    
    ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ
    
    
    ● ΞΫηγϏϦςΟςετɾνΣοΫ
    ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢
    ͳ͓ࠓճͷࣄྫͰ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ɻ
    ͦͷ఺ɺྃ͝ঝ͍ͩ͘͞ɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. ͦΕ͸ Vue Router Ͱ͢ɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

65. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ
    
    
    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ
    
    
    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ
    
    
    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ
    
    
    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ
    
    
    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ͜ͷΑ͏ʹ WAI-ARIA ͸ཁૉʹΑͬͯ͸ͦͷ··࢖༻Ͱ͖ͳ͍΋ͷ͕͋ͬͨΓ
    ஌Βͣʹ࢖͏͜ͱͰΞϓϦέʔγϣϯʹӨڹΛ༩͑͏Δ΋ͷ͕͋Γ·͢ɻ
    

    View Slide

66. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ
    
    
    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ
    
    
    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ
    
    
    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ
    
    
    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ
    
    
    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ࢖༻ํ๏ΛޡΔ͜ͱͰ؆୯ʹΞΫηγϒϧͰ͸ͳ͍΋ͷΛ࡞Γ্͛ͯ͠·͍·͢ɻ
    

    View Slide

67. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ
    
    
    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ
    
    
    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ
    
    
    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ
    
    
    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ
    
    
    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    ҰํͰ HTML Λ࢖͏͜ͱ͸ϒϥ΢βඪ४ʹ͓͍ͯಉҰͷڍಈ͕͓͓Αͦอূ͞Ε͍ͯ·͢ɻ
    

    View Slide

68. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔
    ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ
    
    
    ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ
    
    
    ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ
    
    
    ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ
    
    
    ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ
    
    
    ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ
    
    
    ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ
    WAI-ARIA ΛΑ͘Θ͔Βͣ࢖ͬͯ͠·͍ͦ͏ͳ࣌͸Ұ୴ཱͪࢭ·ͬͯ
    ͦΕΒΛ࢖Θͣʹ HTML ͚ͩͰදݱͰ͖ͳ͍͔ͱ͍͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

73. 2.
    ൚༻ੑͷ͋Δ

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

    View Slide

74. 2.
    ൚༻ੑͷ͋Δ

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

    View Slide

75. 2.
    ൚༻ੑͷ͋Δ

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

    View Slide

76. 2.
    ൚༻ੑͷ͋Δ

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

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

     View Slide

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

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

     View Slide

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

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

     View Slide

127. ͓ΘΓʹ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide