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
2. Vue.js Ͱ 
 ΞΫηγϒϧͳ ίϯϙʔωϯτΛͭ͘ΔͨΊʹ Vue Fes Japan Online 2022 - 2022/10/16 ͜Ε͔ΒʮVue.js ͰΞΫηγϒϧͳίϯϙʔωϯτΛͭ͘ΔͨΊʹʯ ͱ͍͏λΠτϧͰൃදΛ͍͖ͤͯͨͩ͞·͢ɻΑΖ͓͘͠ئ͍͠·͢ɻ
3. ͸͡Ίʹ ࠷ॳʹࣗݾ঺հͰ͢ɻ
4. • ΍·ͷ͘ • he / him • Frontend Designer • 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ ΍·ͷ͘ͱਃ͠·͢ɻWeb σβΠφʔͱͯ͠ಇ͖ग़ͯ͠ɺϚʔΫΞοϓΤϯδχΞͱͯ͠ຊ֨త ʹ Web ٕज़ʹ৮Ε͸͡ΊɺΞΫηγϏϦςΟͷ෼໺ʹؔ৺ΛߴΊ͍͖ͯ·ͨ͠ɻ
5. • ΍·ͷ͘ • he / him • Frontend Designer • 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ ݱࡏ͸ࣄۀձࣾʹॴଐ͠ɺWeb ඪ४ͷٕज़Λ׆༻ͯ͠ ϢʔβʔମݧΛ޲্͍͖͍ͤͯͨ͞ͱߟ͍͑ͯΔऀͰ͢ɻ
6. Vue.js ͱΞΫηγϏϦςΟ ࠓճͷ Vue Fes Japan Online 2022 Ͱ͸ Vue.js ͱΞΫηγϏϦςΟʹ ·ͭΘΔςʔϚͰൃද͍ͤͯͨͩ͘͞ͷͰ͕͢ɺ
7. Vue.js ͱΞΫηγϏϦςΟ ͸͡Ίʹɺͳͥ͜ͷςʔϚͰൃද͢Δͷ͔Λઆ໌͠·͢ɻ
8. Vue.js ͱΞΫηγϏϦςΟ ͦΕ͸ Vue.js Ͱͷ։ൃʹ͓͍ͯ ΞΫηγϏϦςΟΛߟྀ͢Δػձ͕গͳ͍ͷͰ͸ͳ͍͔ͱࢥ͔ͬͨΒͰ͢ɻ
9. ♿ ΞΫηγϏϦςΟʹ͍ͭͯ؆୯ʹઆ໌͢Δͱɺ୭΋͕৘ใ΁ΞΫηεͰ͖ΔΑ͏ʹ͢Δߟ͑ํ ͰɺWeb ʹ͓͍ͯͦͷߟ͑ํΛ࣮ફ͢Δͷ͕ Web ΞΫηγϏϦςΟͱ͍͏΋ͷͰ͢ɻ
10. ࠷ۙͷϑϩϯτΤϯυ։ൃʹ͓͍ͯɺ͜͜ʹ஫ྗͰ͖Δ͜ͱ͸ αΠτ΍ϓϩμΫτͷՁ஋෇͚ɺଞͱͷࠩผԽ͕Ͱ͖ΔྖҬʹͳ͖͍ͬͯͯ·͢ɻ ♿
11. Vue3 ͷυΩϡϝϯτ͔ΒΞΫηγϏϦςΟʹؔ͢Δ߲໨͕௥Ճ͞Ε·ͨ͠ɻ ΞΫηγϏϦςΟͷجૅ΍ɺ࣮ࡍͷϢʔεέʔεͷҰ෦Λֶ΂Δίϯςϯπʹͳ͍ͬͯ·͢ɻ
12. Vue2 ҎલͰ͸૲Ҋͱ͍͏ܗͰϚʔδ͞ΕΔ͜ͱͳ͘ऴΘͬͯ͠·ͬͨͷͰ ͜͏ͨ͠υΩϡϝϯτ͕௥Ճ͞Εͨ͜ͱ͸ྑ͍͜ͱͰ͢ɻ
13. Ͱ͕͢ɺถࠃͷඇӦརஂମ WebAIM ͷௐࠪʹΑΔͱ Vue.js Λ༻͍ͨαΠτͰ͸ΞΫηγϏϦςΟରԠ͕଍Γ͍ͯͳ͍ͱ͍͏ใࠂ͕͕͍͋ͬͯ·͢ɻ
14. ͜Ε͸ಛఆͷϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛ࢖͏͜ͱ͕ΞΫηγϒϧͱͳΒͳ͍ࣄͰ͸ ͋Γ·ͤΜ͕ɺҰࡢ೥ɾڈ೥͔ΒରԠ͕ฏۉҎԼͱͳ͍ͬͯΔࣄ࣮͕͋Γ·͢ɻ
15. ௐࠪ͞ΕͨαΠτʹ೔ຊͷ΋ͷؚ͕͍ͭ͘·Ε͍ͯΔ͔͸ఆ͔Ͱ͸͋Γ·ͤΜ͕ Vue.js Ͱ։ൃΛ͢Δ਎ͱͯ͠ɺ͜ͷঢ়گ͕໺์͠ʹͳ͍͍ͬͯͱ͸ࢥ͍ͬͯ·ͤΜɻ
16. ΞδΣϯμ • ޡͬͨΞΫηγϏϦςΟରԠ • ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ • ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͜ͷηογϣϯͰ͸̏ͭͷςʔϚʹԊͬͯɺࠓޙͷ Vue.js Ͱͷ։ൃͰ ΞΫηγϏϦςΟʹऔΓ૊Έ΍͘͢ͳΔ಺༰Λൃද͍ͨ͠·͢ɻ
17. ΞδΣϯμ • ޡͬͨΞΫηγϏϦςΟରԠ • ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ • ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ର৅͸ʮWeb ΞΫηγϏϦςΟΛֶͼ͸͡Ίͨਓʯ΍ ʮVue.js ͰΞΫηγϏϦςΟͷ޲্Λ͍͖͍ͯͨ͠ਓʯ޲͚ʹͳΓ·͢ɻ
18. ΞδΣϯμ • ޡͬͨΞΫηγϏϦςΟରԠ • ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ • ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͜ͷൃදΛ͖͔͚ͬʹɺࠓޙͷ Vue.js ։ൃʹ͓͚Δ ΞΫηγϏϦςΟ޲্ͷऔΓ૊Έʹܨ͕Ε͹ͱࢥ͓ͬͯΓ·͢ɻ
19. ΞδΣϯμ • ޡͬͨΞΫηγϏϦςΟରԠ • ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ • ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͳ͓ࠓճͷࣄྫͰ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ɻ ͦͷ఺ɺྃ͝ঝ͍ͩ͘͞ɻ
20. 1. ޡͬͨΞΫηγϏϦςΟରԠ
21. 1. ޡͬͨΞΫηγϏϦςΟରԠ ΞΫηγϏϦςΟରԠͰ͸ɺ͋·ΓཧղͤͣʹΑ͔Εͱࢥͬͯ΍ͬͨ΋ͷ͕ Կ΋Өڹ͕ͳ͔ͬͨΓɺͦΕͲ͜Ζ͔ѱ͘ͳΔ͜ͱ͕͋Γ·͢ɻ
22. 1. ޡͬͨΞΫηγϏϦςΟରԠ ѱ͍ΞΫηγϏϦςΟରԠΛͳͨ͘͢Ίʹ΋ Αؒ͘ҧ͍΍͍͢ରԠʹ͍ͭͯઌʹֶΜͰ͍͖·͠ΐ͏ɻ
23. ΞΫηγϏϦςΟΛҙࣝ͢ΔΑ͏ʹͳ͔ͬͯΒ WAI-ARIA ʹ͍ͭͯ஌ͬͨਓ͸ଟ͍Ͱ͠ΐ͏ɻ
24. WAI-ARIA ͸εΫϦʔϯϦʔμʔͱ͍ͬͨࢧԉٕज़΁ HTML ͚ͩͰ͸දݱ͖͠Εͳ͍ΞΫηγϒϧͳ৘ใΛิ׬͢Δٕज़࢓༷Ͱ͢ɻ
25. ϒϥ΢β͔Β DOM πϦʔͱ CSS ͷϨϯμϦϯάΛղੳͯ͠ ΞΫηγϏϦςΟʹؔ͢Δ৘ใ͕ΞΫηγϏϦςΟπϦʔʹ൓ө͞Ε·͢ɻ
26. ͦͯ͠ OS ͝ͱͷΞΫηγϏϦςΟ API ͔Βࢧԉٕज़΋ͬͯϢʔβʔʹ৘ใ͕ಧ͖·͢ɻ
27. WAI-ARIA ͸͜ͷΞΫηγϏϦςΟπϦʔͷதͰ ೝ஌Ͱ͖ΔΑ͏ʹҙຯ͚ͮͯ͋͛͠Δͱ͍͏ܗͰ͢ɻ
28. 💪 WAI-ARIA Λ࢖͏͜ͱͰΞΫηγϏϦςΟΛߴΊΔ͜ͱ͕Ͱ͖Δͱ࢖͍ग़͢ਓ͕͍·͢ɻ ࢲ΋ͦͷ̍ਓͰͨ͠ɻ
29. 💪 Ͱ͕͢ WAI-ARIA Λ࢖༻͢ΔʹลΓؾΛ͚ͭͳ͚Ε͹ͳΒͳ͍͜ͱ͕͋Γ·͢ɻ
30. ͦΕ͸ʮNO ARIA is better than BAD ARIAʢARIA ແ͠ͷ΄͏͕ɺѱ͍ ARIA ΑΓ΋ྑ͍ʣʯ ͱ͍͏͜ͱͰ͢ɻ “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1
31. “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1 ͭ·ΓɺWAI-ARIA Λؒҧͬͯ࢖͏͘Β͍ͳΒ ͦΕΛ࢖Θͳ͍΄͏͕·ͩΞΫηγϏϦςΟͱͯ͠ϚγͰ͋Δͱ͍͏͜ͱͰ͢ɻ
32. ࠓճ͸ͦΜͳ WAI-ARIA ͷ࢖༻ʹ͍ͭͯɺ ։ൃ࣌ʹޡΓ΍͍͢΋ͷ΍ҙࣝ͠๨Ε͕ͪͳ෦෼ʹ͍ͭͯ঺հ͠·͢ɻ “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1
33. aria-label ·ͣ͸ aria-labelɻ ͪ͜Β͸ࢧԉٕज़ʹ఻͍͑ͨςΩετ৘ใ͕͋Δ৔߹ʹ࢖༻͞ΕΔ΋ͷͰ͢ɻ
34. ۩ମྫͱͯ͠͸ΞΠίϯ͚ͩͷϘλϯ͕ڍ͛ΒΕ·͢ɻ ͜ͷύλʔϯͰ͸Ϙλϯ಺ʹςΩετ͕ͳ͍ͨΊʮϝχϡʔɺϘλϯ ʯͱͯ͠ೝࣝ͞Ε·͢ɻ
35. Ͱ͸͜ͷύλʔϯͰ͸Ͳ͏ͳΔͰ͠ΐ͏͔ɻ
36. ϦϯΫͷ಺෦ʹը૾ςΩετ͕͋Δ৔߹Ͱ͕͢ ͜Ε͸ alt ͷ৘ใΛ্ॻ͖ͯ͠ʮϦϯΫɺΠϝʔδɺVueʯͱಡ·Εͯ͠·͍·͢ɻ
37. ·ͨɺ͜ͷ৔߹͸ label ཁૉΛແޮԽͯ͠ ʮೖྗϑΥʔϜɺςΩετΛฤूʯͱಡ·Εͯ͠·͍·͢ɻ
38. ͜ͷΑ͏ʹ aria-label ͸ຊདྷ఻͔͑ͨͬͨςΩετ৘ใΛ্ॻ͖ͯ͠͠·͏͜ͱ͕͋Γ·͢ɻ
39. aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏ • ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍ • ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ • WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ ◦ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর ࢧԉٕज़ͷϢʔβʔ͚ͩҧ͏৘ใΛ༩͑ͯ͠·͏ͷͰ͸ͳ͘ ͋ΒΏΔਓʹಉ౳ͷ৘ใΛ༩͑ΔͨΊʹɺͰ͖ΔݶΓݟ͑ΔςΩετͰఏڙ͍ͯͩ͘͠͞ɻ
40. aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏ • ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍ • ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ • WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ ◦ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর ͪͳΈʹ aria-label ͸ WAI-ARIA 1.2 ΑΓ div ཁૉ΍ span ཁૉͱ͍ͬͨ generic role ͳͲɺ ໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯ·͢ɻৄࡉ͸࢓༷ΛνΣοΫͯ͠Έ͍ͯͩ͘͞ɻ
41. aria-hidden ࣍͸ aria-hidden ʹ͍ͭͯɻ
 aria-hidden ͸ͦͷཁૉͱ͢΂ͯͷࢠཁૉΛΞΫηγϏϦςΟπϦʔ͔Β࡟আ͢Δ΋ͷͰ͢ɻ
42. ۩ମྫͱͯ͠͸ࢧԉٕज़ʹ఻͑ͳͯ͘ྑ͍૷০తͳཁૉ΍ॏෳ͍ͯ͠Δίϯςϯπɺ Ϟʔμϧ͕දࣔ͞Εͨͱ͖ʹͦΕҎ֎ͷίϯςϯπΛӅ͢ͱ͖ͳͲ͕ڍ͛ΒΕ·͢ɻ
43. aria-hidden ͸ͱͯ΋ڧྗͳ΋ͷͳͷͰ ࢖͏৔߹͸ӨڹൣғΛ͖ͪΜͱ೺Ѳ্ͨ͠Ͱ࢖͍·͠ΐ͏ɻ
44. ͨͱ͑͹ϞʔμϧΛϥοϓ͢Δ਌ཁૉʹ aria-hidden Λ࢖ͬͯ͠·͏ͱ ϞʔμϧΛؚΊͯ͢΂ͯӅ͞Εͯ͠·͏͔ΒͰ͢ɻ
45. ͔ͤͬ͘ͷࢧԉٕज़αϙʔτ͕ແବʹͳͬͯ͠·͍·͢ɻ
46. ·ͨɺϑΥʔΧεͤ͞Δཁૉ΍ͦΕΛ಺แ͢Δཁૉʹ࢖༻͠ͳ͍Α͏ʹؾΛ͚͍ͭͯͩ͘͞ɻ ϑΥʔΧεࣗମ͸Ͱ͖ͯ΋ͦͷཁૉ͕Կͳͷ͔ೝࣝͰ͖ͳ͘ͳΔ͔ΒͰ͢ɻ
47. Ұ࣌తʹӅ͢ͷͰ͸ͳ͘׬શʹཁૉΛফ͍ͨ͠৔߹ CSS Ͱͷ display: none ΍ hidden ଐੑΛ࢖͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ
48. aria-live ࣍͸ aria-live ʹ͍ͭͯɻ͜Ε͸ϥΠϒϦʔδϣϯͱݺ͹ΕΔ΋ͷͰ ϖʔδ಺ͰಈతͳมԽ͕͋ͬͨ৔߹ɺͦΕΛࢧԉٕज़΁఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ
49. ۩ମྫͱͯ͠͸ɺϑΥʔϜೖྗʹมԽ͕͋ͬͨࡍ΍ SPA ʹ͓͚Δը໘ભҠ࣌ɺ ܯࠂͷ௨஌΍ΧϧʔηϧͷมԽ࣌ͳͲ͕ڍ͛ΒΕ·͢ɻ
50. • polite ◦ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ • assertive ◦ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ • off ◦ Կ΋௨஌ͤ͞ͳ͍ ◦ σϑΥϧτͷ஋ aria-live ͷ஋ ௨ৗͷ௨஌Ͱ͋Ε͹ ಈ࡞͕׬͔ྃͯ͠ΒಡΈ্͛ͯ͘ΕΔ aria-live=“polite" Ͱઃఆ͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ
51. • polite ◦ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ • assertive ◦ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ • off ◦ Կ΋௨஌ͤ͞ͳ͍ ◦ σϑΥϧτͷ஋ aria-live ͷ஋ aria-live="assertive" ͸ಈతͳมߋ͕͋Δࡍʹଞͷૢ࡞ΛׂΓࠐΜͰ௨஌͖ͯ͠·͢ɻ ͜Ε͸Ξϥʔτͱͯ͠ͷ໾ׂͰ͋Ε͹Α͍ͷͰ͕͢ɺ
52. • polite ◦ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ • assertive ◦ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ • off ◦ Կ΋௨஌ͤ͞ͳ͍ ◦ σϑΥϧτͷ஋ aria-live ͷ஋ ࣗಈతʹ੾ΓସΘΔΧϧʔηϧ΍ϑΥʔϜೖྗதʹৗʹ৘ใΛ௨஌͖ͯͨ͠Β ஶ͘͠ϢʔβମݧΛଛͶͯ͠·͏ͷͰɺޡͬͨ஋Ͱ࢖༻͠ͳ͍Ͱ͍ͩ͘͞ɻ
53. aria-current ࠷ޙʹ aria-current ʹ͍ͭͯɻ ͪ͜Β͸ݱࡏͷҐஔΛ఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ
54. ࢖༻ྫͱͯ͠͸ϖʔδωʔγϣϯ΍φϏήʔγϣϯɺ ύϯͣ͘ͷϦϯΫʹ͓͍ͯݱࡏͷ߲໨Λ఻͑Δͱ͖ʹ࢖༻͞Ε·͢ɻ
55. ୯ମͷ WAI-ARIA ͱͯ͠͸͜Ε·Ͱઆ໌ͨ͠΋ͷͱൺֱ͢Δͱ සൟʹ࢖͏ػձ͸গͳ͍Ͱ͠ΐ͏ɻ
56. Ͱ͕͢ɺVue.js Ͱ։ൃ͢ΔਓͰ͋Ε͹Α͘ݟ͔͚ΔϥΠϒϥϦͰ࢖༻͞Ε͍ͯ·͢ɻ
57. ͦΕ͸ Vue Router Ͱ͢ɻ
58. router-link Ͱ࢖༻͞ΕΔ͜ͱ΋͋Ε͹ Nuxt.js ͷඪ४ϦϯΫίϯϙʔωϯτͰ͋Δ nuxt-link Ͱ΋࢖༻͞Ε͍ͯ·͢ɻ
59. ݱࡏͷ URL ύεͱ߹க͢ΔϦϯΫઌ͕ઃఆ͞Ε͍ͯΔ৔߹ ͦͷϦϯΫʹ͸ aria-current="page" ͕෇༩͞Ε·͢ɻ
60. ϦϯΫςΩετࣗମ͕ͦͷϖʔδλΠτϧͱ߹க͍ͯ͠Ε͹༗༻ͳ࢖͍ํͱݴ͑·͢ɻ
61. Ͱ͕͢͜ͷཁૉΛແ࡞ҝʹஔ͍ͯ͠·͍ͬͯΔͱ Կ͕ݱࡏҐஔͷ΋ͷͰ͋Δ͔ͷ৘ใ͕൥ࡶʹͳͬͯ͠·͍·͢ɻ
62. ϚʔΫΞοϓ͢Δࡍʹ͸ϦϯΫΛͲ͏͍ͬͨάϧʔϐϯάʹ͢Δ͔ ஔ͘ྖҬΛҙࣝ͠·͠ΐ͏ɻ
63. ͪͳΈʹ Vue Router ʹ͸ aria-current ෦෼Λ API ͱ੍ͯ͠ޚͰ͖·͢ɻ
64. ஋͸ෳ਺ଘࡏ͓ͯ͠Γɺεςοϓ΍೔෇ɺݱࡏ࣌ࠁͷ৘ใΛࣔ͢͜ͱ͕ՄೳͰ͢ɻ aria-current ͷ஋͕ҙਤͨ͠΋ͷͱͳ͍ͬͯΔ͔֬ೝͯ͠Έ·͠ΐ͏ɻ
65. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ • ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ◦ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ◦ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ◦ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ◦ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ • ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ◦ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ◦ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ͜ͷΑ͏ʹ WAI-ARIA ͸ཁૉʹΑͬͯ͸ͦͷ··࢖༻Ͱ͖ͳ͍΋ͷ͕͋ͬͨΓ ஌Βͣʹ࢖͏͜ͱͰΞϓϦέʔγϣϯʹӨڹΛ༩͑͏Δ΋ͷ͕͋Γ·͢ɻ
66. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ • ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ◦ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ◦ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ◦ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ◦ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ • ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ◦ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ◦ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ࢖༻ํ๏ΛޡΔ͜ͱͰ؆୯ʹΞΫηγϒϧͰ͸ͳ͍΋ͷΛ࡞Γ্͛ͯ͠·͍·͢ɻ
67. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ • ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ◦ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ◦ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ◦ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ◦ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ • ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ◦ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ◦ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ҰํͰ HTML Λ࢖͏͜ͱ͸ϒϥ΢βඪ४ʹ͓͍ͯಉҰͷڍಈ͕͓͓Αͦอূ͞Ε͍ͯ·͢ɻ
68. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ • ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ◦ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ◦ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ◦ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ◦ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ • ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ◦ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ◦ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ WAI-ARIA ΛΑ͘Θ͔Βͣ࢖ͬͯ͠·͍ͦ͏ͳ࣌͸Ұ୴ཱͪࢭ·ͬͯ ͦΕΒΛ࢖Θͣʹ HTML ͚ͩͰදݱͰ͖ͳ͍͔ͱ͍͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ
69. ։ൃऀ޲͚ͷ Web ٕज़ͷ৘ใ͕ू໿͞Ε͍ͯΔ MDN Web Docs ʹ͸ HTML ཁૉͷϖʔδͰΞΫηγϏϦςΟ্ͷݒ೦఺͕ࡌ͍ͬͯ·͢ɻ
70. ීஈॻ͍͍ͯΔ HTML ͷ࢖͍ํ͕ؒҧͬͯͳ͍͔Λཧղ͢Δ্Ͱ༗ӹͳαΠτͰ͢ɻ
71. ·ͨɺHTML ΛΑΓৄࡉʹֶͿͷͰ͋Ε͹ʮHTML ղମ৽ॻʯ΋Φεεϝ͠·͢ɻ
72. ݱ࣌఺Ͱ΋ͬͱ΋ HTML ͷ࢓༷ॻʹີ઀ͳ೔ຊޠͷॻ੶Ͱ͢ͷͰ ࣮૷΍ϨϏϡʔ࣌ͷϦϑΝϨϯεͱͯ͠΋׆༻ͯ͠Έ͍ͯͩ͘͞ɻ
73. 2. ൚༻ੑͷ͋Δ
 ΞΫηγϒϧͳίϯϙʔωϯτ
74. 2. ൚༻ੑͷ͋Δ
 ΞΫηγϒϧͳίϯϙʔωϯτ ઌఔͷࣄྫΑΓ WAI-ARIA ͸৻ॏʹ࢖͏ඞཁ͕͋Δ͜ͱΛઆ໌͍ͨ͠·ͨ͠ɻ Ͱ͕ͦ͢ΕΒΛ͍͍ͪͪ֬ೝ͠ͳ͕Βͷ։ൃ͸େมͰ͢ɻ
75. 2. ൚༻ੑͷ͋Δ
 ΞΫηγϒϧͳίϯϙʔωϯτ ͦ͜ͰίϯϙʔωϯτઃܭͰϧʔϧΛ಺แͤ͞Δ͜ͱͰ νʔϜ։ൃʹ͓͍ͯೝࣝͷᴥᴪΛݮΒͨ͠։ൃ͕͠΍͘͢ͳΓ·͢ɻ
76. 2. ൚༻ੑͷ͋Δ
 ΞΫηγϒϧͳίϯϙʔωϯτ ࣍͸൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ࡞Γʹؔ͢ΔώϯτΛ঺հ͠·͢ɻ
77. TypeScript Ͱิڧ͢Δ Vue3 ͔Β͸ TypeScript ରԠ͕վળ͞Ε͖ͯ·ͨ͠ɻ ͜ΕΛظʹಋೖͩͨ͠͠ਓ΋͍ΔͰ͠ΐ͏ɻ
78. TypeScript Ͱิڧ͢Δ ΋͠ಋೖ͍ͯ͠Δ৔߹ ΞΫηγϒϧͳίϯϙʔωϯτ࡞ΓΛิڧ͢ΔͨΊʹ༗༻ͳखஈͱͳΓ·͢ɻ
79. ͜ͷύλʔϯͰ͸ݟग़͠ίϯϙʔωϯτΛ൚༻తʹ࢖͑ΔΑ͏࣮૷͠·ͨ͠ɻ
80. <component> ཁૉʹ͸ is ଐੑʹΑͬͯ͋ΒΏΔཁૉΛೖΕΒΕΔͨΊ ͦΕΒΛ props ͷ஋͔Β੍ޚ͢Δܗʹ͍ͯ͠·͢ɻ
81. ͜ΕҎ֎ʹ΋ը૾ίϯϙʔωϯτͷΑ͏ͳ৔߹͸୅ସςΩετͱͳΔ props Λઃஔͨ͠Γ ଟݴޠରԠͷࡍ͸ lang ଐੑʹ͋ͨΔ΋ͷΛ props ʹઃஔ͢ΔͳͲ
82. ͸͡ΊͯίϯϙʔωϯτΛ࢖͏ਓʹ΋ඞཁͩͱ෼͔Δ props Λఆ͓ٛͯ͘͠ͱΑ͍Ͱ͠ΐ͏ɻ
83. ·ͨ vue-tsc ͱ͍ͬͨܕݕࠪπʔϧΛ࢖༻͢Δͱ <template> ಺ͷଐੑ஋΋νΣοΫͯ͘͠Ε·͢ɻ
84. ͜͜Ͱؒҧͬͨ஋͕ೖ͍ͬͯͳ͍͔΋஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ
85. Visually Hidden Visually Hidden ͱ͸ࢹ֮తʹ͸֬ೝͰ͖ͳ͍͕ࢧԉٕज़ʹΑΓ֬ೝͰ͖Δํ๏Ͱ͢ɻ Bootstrap ͱ͍֤ͬͨछ UI ϑϨʔϜϫʔΫͰఆٛ͞Ε͍ͯͨΓ͠·͢ɻ
86. લड़ͨ͠ aria-label ͱ΋ࣅ͍ͯ·͕͢ ͜ͷΑ͏ͳίϯϙʔωϯτͱ͢Δ͜ͱͰ൚༻తʹ࢖͍ճͤ·͢ɻ
87. ςΩετ͕ͳ͍৔߹ͷ Button ίϯϙʔωϯτ΍ɺ ϑΥʔϜύʔπͷϥϕϧ෦෼ΛӅ͢৔߹ͳͲʹ׆༻͢Δ͜ͱ͕Ͱ͖·͢ɻ
88. ·ͨɺCSS ͷ੍ޚΑͬͯϑΥʔΧε͢Δ৔߹͸දࣔͤ͞Δ͜ͱ͕Ͱ͖·͢ɻ
89. ͜Ε͸ʮεΩοϓϦϯΫʯͱ͍͏ɺίϯςϯπʹεΩοϓҠಈͰ͖Δ ࢧԉٕज़ϢʔβʔͷͨΊͷखஈͱͯ͠࢖༻Ͱ͖·͢ɻ
90. ௨ৗɺը໘্ʹ͸ݱΕ·ͤΜ͕ ϔομʔͷ಺༰͕ଟ͍৔߹ʹίϯςϯπʹ௚઀εΩοϓͰ͖ΔΑ͏ʹ͢Δ΋ͷͰ͢ɻ
91. Fragments Vue3 ͔Β͸ Fragments ͱ͍͏֓೦͕ಋೖ͞Ε͍ͯ·͢ɻ
92. Vue2 ·Ͱ͸ <template> ಺ͷϧʔτཁૉ͸୯Ұͷ΋ͷͰͳ͚Ε͹ͳΓ·ͤΜͰͨ͠ɻ ͦΕʹΑΓίϯϙʔωϯτʹΑͬͯ͸ϚʔΫΞοϓ͕ؒҧ͍ͬͯΔ৔߹͕͋Γ·ͨ͠ɻ
93. Fragments ʹΑΓϧʔτ͕୯ҰͰͳͯ͘΋Α͘ͳΓ ίϯϙʔωϯτʹ͓͚ΔϚʔΫΞοϓͷਖ਼͕͠͞อূ͞Ε΍͘͢ͳΓ·ͨ͠ɻ
94. ͨͩ͠ίϯϙʔωϯτͷϧʔτཁૉʹ ਌ίϯϙʔωϯτ͔ΒͷଐੑΛࣗಈతʹ෇༩͞Εͳ͘ͳΔ͜ͱʹ͸஫ҙͰ͢ɻ
95. ͦͷ৔߹͸ inheritAttrs Λ false ʹͯ͠ ଐੑΛड͚औΔཁૉʹ v-bind="$attrs" Λ෇༩͓͖ͯ͠·͠ΐ͏ɻ
96. 3. ΞΫηγϏϦςΟ ςετɾνΣοΫ
97. 3. ΞΫηγϏϦςΟ ςετɾνΣοΫ ΞΫηγϒϧͳίϯϙʔωϯτ͕࡞ΕͨͰ͠ΐ͏͔ɻ ͱͯ΋ૉ੖Β͍͠Ͱ͢Ͷɻ
98. 3. ΞΫηγϏϦςΟ ςετɾνΣοΫ Ͱ͕͢ɺίϯϙʔωϯτΛ࡞Δ͜ͱҎ্ʹେ੾ͳ͜ͱ͕͋Γ·͢ɻ ͦΕ͸͖ͪΜͱಈ࡞͍ͯ͠Δ͔Λ֬ೝ͢Δ͜ͱͰ͢ɻ
99. 3. ΞΫηγϏϦςΟ ςετɾνΣοΫ ͱ͍͏Θ͚Ͱɺ࡞ͬͨίϯϙʔωϯτ͕ຊ౰ʹ໰୊ͳ͍͔Λ֬ೝ͢ΔͨΊʹ ςετ΍νΣοΫΛ͍͖ͯ͠·͠ΐ͏ɻ
100. Linter ·ͣ͸ɺ੩తղੳπʔϧͰνΣοΫͯ͠Έ·͠ΐ͏ɻ
101. eslint Λಋೖ͍ͯ͠ΔͳΒ eslint-plugin-vuejs-accessibility Λ࢖༻͢Δ͜ͱΛΦεεϝ͠·͢ɻ
102. ͪ͜Β͸ Vue.js ίʔυ಺ͰΞΫηγϏϦςΟΛଛͶΔίʔυ͕͋ͬͨ৔߹ʹ ࢦఠͯ͘͠ΕΔ eslint plugin Ͱ͢ɻ
103. ߏங͢ΔαΠτ΍ΞϓϦέʔγϣϯʹΑͬͯ͸ෆཁͳϧʔϧ͕͋Δ͔΋͠Ε·ͤΜɻ ಋೖલʹԿͷϧʔϧΛ༗ޮʹ͢Δ͔Λݕ౼͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ
104. ΑΓϚʔΫΞοϓʹ޲͖߹ͬͯ HTML ͷਖ਼֬͞Λ֬ೝ͍ͨ͠৔߹ɺ markuplint Λಋೖͯ͠ΈΔ͜ͱ΋༗༻Ͱ͢ɻ
105. Vue.js ͷύʔαʔ͕ଘࡏ͢ΔͷͰซͤͯ࢖͏͜ͱͰ vue ίϯϙʔωϯτ಺ΛνΣοΫͯ͘͠Ε·͢ɻ
106. ͨͩ͠ markuplint ͸ɺಈతόΠϯσΟϯάͳଐੑͱͳ͍ͬͯΔ৔߹͸ ಺༰ΛධՁͰ͖ͳ͍ͨΊɺεϧʔ͞Εͯ͠·͍·͢ɻ
107. ͜ͷ৔߹ɺલड़ͨ͠ TypeScript Ͱͷܕఆٛ΍ props Ͱ਌͔Βਖ਼͍͠಺༰Λड͚औΔΑ͏ʹͨ͠Γɺ
108. ੩తͳ HTML ͷग़ྗ࣌΍ɺεφοϓγϣοτςετͷ HTML Λ΋ͱʹ markuplint ͰνΣοΫ͢ΔͱΑ͍Ͱ͠ΐ͏ɻ
109. ݁߹ςετ ϑϩϯτΤϯυͷςετͷͨΊʹ Jest Λಋೖ͍ͯ͠·͢Ͱ͠ΐ͏͔ɻ ͩͱ͢Δͱ͋ͳͨ͸ϥοΩʔͰ͢ɻ
110. ݁߹ςετ testing-library Λ࢖ͬͯࢧԉٕज़ϢʔβʔΛ૝ఆͨ͠ৼΔ෣͍ͷ ݁߹ςετΛॻ͍ͯΈ·͠ΐ͏ɻ
111. ͜ͷςετέʔεͰ͸ getByRole Λ༻͍ͯཁૉͷ role Λऔಘ͠ ಺෦ͷςΩετΛ֬ೝ͢ΔΑ͏ʹ͍ͯ͠·͢ɻ
112. ߋʹΩʔϘʔυςετΛͯ͘͠ΕΔ testing-library ֦ுػೳΛ࢖͍ɺ ਖ਼͘͠ػೳ͍ͯ͠Δ͔ΛνΣοΫ͍ͯ͠·͢ɻ
113. userEvent ʹͯλϒҠಈͤͨ͞ΓΫϦοΫͤ͞Δ͜ͱ΋Ͱ͖·͕͢ɺ ͪ͜Βͷ৔߹͕؆ܿͰཧղ͠΍͍͢ܗʹͳΓ·͢ɻ
114. ͞Βʹ jest-axe Λ࢖༻͢Δ͜ͱͰ શମతʹΞΫηγϏϦςΟҧ൓͕ͳ͍͔ΛνΣοΫ͢Δ͜ͱ΋ग़དྷ·͢ɻ
115. ͜Ε͸ axe ͱ͍͏ΞΫηγϏϦςΟݕূϥΠϒϥϦͷΤϯδϯΛ࢖༻ͨ͠ Jest ͷ matcher Ͱ͢ɻ
116. eslint ಉ༷ɺϧʔϧ͸ಠࣗͰௐ੔Ͱ͖ΔͷͰ ඞཁʹԠͯ͡ਫ਼ࠪͯ͠Έ͍ͯͩ͘͞ɻ
117. ϒϥ΢βɾࢧԉٕज़νΣοΫ ςετίʔυΛ΋ͬͯΞΫηγϏϦςΟͷਖ਼͠͞Λ֬ೝͰ͖ͨͷͳΒ ࣍͸࣮ࡍͷϒϥ΢β΍ࢧԉٕज़Ͱ΋νΣοΫͯ͠Έ·͠ΐ͏ɻ
118. vue-axe ͸ϒϥ΢β্ͰΞΫηγϏϦςΟνΣοΫ͕Ͱ͖ΔΑ͏ʹͳΔϓϥάΠϯͰ͢ɻ Vue.js ͷ։ൃ಺ʹ૊ΈࠐΉ͜ͱ͕Ͱ͖ɺҧ൓͍ͯ͠ΔՕॴ͕ͳ͍͔Λࢦఠͯ͘͠Ε·͢ɻ
119. ϩʔΧϧ։ൃΛ͠ͳ͕Βɺ໰୊఺Λ௵͍ͯ͘͠ࡍʹ༗༻ͳϓϥάΠϯͰ͢ɻ ίϯτϥετൺΛؚΉɺίʔυ্Ͱ͸ؾ͚ͮͳ͔ͬͨ෦෼ʹ஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ
120. ΩʔϘʔυૢ࡞ͷ֬ೝ • λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ◦ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ • ϑΥʔΧεॱংͷՄࢹԽ ◦ taba11y ◦ Firefox DevTools ▪ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ઌ΄ͲͷςετͰΩʔϘʔυͷૢ࡞ʹ͍ͭͯهड़͍ͯ͠·͕ͨ͠ ࣮ࡍͷϒϥ΢βͰΩʔϘʔυૢ࡞͕Ͱ͖Δ͔΋֬ೝͯ͠Έ·͠ΐ͏ɻ
121. ΩʔϘʔυૢ࡞ͷ֬ೝ • λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ◦ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ • ϑΥʔΧεॱংͷՄࢹԽ ◦ taba11y ◦ Firefox DevTools ▪ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ϑΥʔϜཁૉ΍ϦϯΫͳͲͰ͸λϒΩʔͰͷભҠ΍ૢ࡞͕Ͱ͖Δ͔νΣοΫͯ͠Έ·͠ΐ͏ɻ ΋͘͠͸ E2E ςετΛ௨ͯ͠ϑΥʔΧεͷڍಈΛνΣοΫͯ͠ΈΔͷ΋Α͍Ͱ͠ΐ͏ɻ
122. ΩʔϘʔυૢ࡞ͷ֬ೝ • λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ◦ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ • ϑΥʔΧεॱংͷՄࢹԽ ◦ taba11y ◦ Firefox DevTools ▪ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ૝ఆͨ͠ॱংʹϑΥʔΧεͰ͖ΔΑ͏ʹͳ͍ͬͯΔ͔Λ֬ೝ͠·͠ΐ͏ɻ taba11y ͱ͍͏֦ுػೳΛ࢖͏͜ͱͰϒϥ΢β্ͰϑΥʔΧεॱংΛՄࢹԽͯ͘͠Ε·͢ɻ
123. ΩʔϘʔυૢ࡞ͷ֬ೝ • λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ◦ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ • ϑΥʔΧεॱংͷՄࢹԽ ◦ taba11y ◦ Firefox DevTools ▪ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ͪͳΈʹ Firefox ͷ DevTools Ͱ͸ ඪ४ͷػೳͰϑΥʔΧεॱংΛ֬ೝͰ͖ΔΑ͏ʹͳ͍ͬͯ·͢ɻ
124. εΫϦʔϯϦʔμʔ • Windows OSʮφϨʔλʔʯ • macOS ˍ iOSʮVoiceOverʯ • AndroidʮTalkBackʯ • NVDA
 • ࢧԉٕज़ࣗಈςετ༻πʔϧ ◦ Guidepup ◦ web-test-runner-voiceover ◦ VoiceOver.js ࢧԉٕज़ͷ̍ͭͰ΋͋ΔεΫϦʔϯϦʔμʔʹ͓͍ͯ ࣮ࡍʹͲ͏࢖ΘΕΔ͔΋νΣοΫ͓͖ͯ͠·͠ΐ͏ɻ
125. εΫϦʔϯϦʔμʔ • Windows OSʮφϨʔλʔʯ • macOS ˍ iOSʮVoiceOverʯ • AndroidʮTalkBackʯ • NVDA
 • ࢧԉٕज़ࣗಈςετ༻πʔϧ ◦ Guidepup ◦ web-test-runner-voiceover ◦ VoiceOver.js Windows ΍ macOSɺεϚʔτϑΥϯ OS ʹ͸ඪ४ͰεΫϦʔϯϦʔμʔ͕౥ࡌ͞Ε͍ͯ·͢ɻ Windows ͷΈͰ͕͢ OSS Ͱެ։͞Ε͍ͯΔ NVDA ͱ͍͏εΫϦʔϯϦʔμʔ΋͋Γ·͢ɻ
126. εΫϦʔϯϦʔμʔ • Windows OSʮφϨʔλʔʯ • macOS ˍ iOSʮVoiceOverʯ • AndroidʮTalkBackʯ • NVDA
 • ࢧԉٕज़ࣗಈςετ༻πʔϧ ◦ Guidepup ◦ web-test-runner-voiceover ◦ VoiceOver.js ·ͨɺҰ෦ͷࢧԉٕज़ͷΈͰ͕͢ ࣗಈςετͱ࣮ͯ͠ࢪͰ͖ΔͨΊͷπʔϧ΋ެ։͞Ε͍ͯ·͢ɻ
127. ͓ΘΓʹ
128. ͓ΘΓʹ ࠓճ঺հͨ͜͠ͱҎ֎Ͱ΋ΞΫηγϏϦςΟʹߟྀ͢Δ͜ͱ͸͍ͭ͘΋͋Γ·͢ɻ ϑϩϯτΤϯυ։ൃͰ͚ͩߟྀ͢Ε͹Α͍΋ͷͰ͸͋Γ·ͤΜɻ
129. ͓ΘΓʹ Ͱ͕͢ɺΞΫηγϏϦςΟରԠͱ͍͏΋ͷʹ׬ᘳͳ΋ͷ͸ͳ͍ͷͰɺ ؒҧ͍Λݟ͚ͭͨΒযΒͣʹ࣮֬ʹ௚͍ͯ͘͜͠ͱ͕େ੾Ͱ͢ɻ
130. ͞Βʹ Vue.js ։ൃͱΞΫηγϏϦςΟͷྖҬʹ଍Λ౿ΈೖΕͨ͘ͳΓ·͔ͨ͠ɻ
131. Web ΞΫηγϏϦςΟεϖγϟϦετͷ Marcus ࢯ͕ Accessible Vue ͱ͍͏ίϯςϯπΛແྉͰެ։͍ͯ͠·͢ɻ
132. ΑΓ୳ٻ͍͖͍ͯͨ͠ਓ͸ͪ͜Β΋ซͤͯ͝ཡʹͳͬͯΈ͍ͯͩ͘͞ɻ
133. ࠓճͷൃද͔ΒΞΫηγϏϦςΟΛҙࣝͨ͠ Vue.js ։ൃ͕૿͍͖͑ͯ ΞΫηγϒϧͳαΠτ΍ΞϓϦέʔγϣϯ͕ੜ·Ε͍͚ͯΕ͹ͱࢥ͓ͬͯΓ·͢ɻ
134. Thanks for listening! Vue Fes Japan Online 2022 - 2022/10/16 Ҏ্ͰൃදΛऴΘΓ·͢ɻ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ