画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions

Vue Fes Japan 2023 発表資料（Web 版）

ブラウザ側で画面遷移を制御するクライアントサイドルーティングという手法はサーバーからの待ち時間を無くしスムーズにブラウジングできるようにして、画面遷移における認知負荷を減らす点で活用されています。 Nuxt 3.4 からは実験的に搭載された View Transitions API の設定でスムーズな遷移アニメーションが実現できるようになりました。
しかし、これらの手法は情報が正しく伝わるかどうかのアクセシビリティ観点から考慮が必要なものです。 本セッションでは、画面遷移時にどのように情報が伝わっているのか、Nuxt アプリケーションをよりアクセシブルにするためのアプローチを実装例を元に紹介します。

Transcript

1. ը໘ભҠ͔Βߟ͑Δ Nuxt ΞϓϦέʔγϣϯΛ ΞΫηγϒϧʹ͢Δํ๏ Vue Fes Japan 2023 | 2023-10-28
2. ͸͡Ίʹ
3. • ΍·ͷ͘ • he / him • CrowdWorks, Inc. • Frontend Designer • 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ
4. ΢ΣϒΞΫηγϏϦςΟ
5. Access + Ability = Accessibility (A11y)
6. ʮར༻ऀͷো֐ͷ༗ແ΍ͦͷఔ౓ɺ೥ ྸ΍ར༻؀ڥʹ͔͔ΘΒͣɺ΢ΣϒͰ ఏڙ͞Ε͍ͯΔ৘ใ΍αʔϏεΛར༻ Ͱ͖Δ͜ͱɺ·ͨ͸ͦͷ౸ୡ౓ʯ ΢ΣϒΞΫηγϏϦςΟಋೖΨΠυϒοΫʛσδλϧி
7. ΢Σϒ͸ͦ΋ͦ΋ ΞΫηγϒϧͳ΋ͷ
8. ো֐౰ࣄऀ΋ ΢ΣϒαʔϏεΛ࢖͍ͬͯΔ
9. ࢧԉٕज़ར༻ऀͷঢ়گΛ஌Δ • ύιίϯ΍εϚʔτϑΥϯͷ༻్ʹ͍ͭͯ ◦ Webݕࡧɺχϡʔεɾ৽ฉͷӾཡɺϒϩάɾSNSͷӾཡɺ ֎ग़࣌ͷφϏήʔγϣϯɺ৐Γ׵͑ݕࡧɺγϣοϐϯάɺ ۚ༥αʔϏεͷޱ࠲ͷঢ়گ֬ೝɺϚΠϙʔλϧ΍ϚΠφϯ όʔΧʔυΛར༻֤ͨ͠छखଓ͖౳ ୈ3ճࢧԉٕज़ར༻ঢ়گௐࠪใࠂॻ | ೔ຊࢹ֮ো֐ऀICTωοτϫʔΫ
10. վਖ਼ো֐ऀࠩผղফ๏ͱ ؀ڥͷ੔උ
11. ϦʔϑϨοτʮྩ࿨̒೥݄̐̍೔͔Β߹ཧత഑ྀͷఏڙ͕ٛ຿Խ͞Ε·͢ʂʯ - ಺ֳ෎
12. ߹ཧత഑ྀͷఏڙ | ো֐ऀͷࠩผղফʹ޲͚ͨཧղଅਐϙʔλϧαΠτ
13. ʮ߹ཧత഑ྀʯ͸ ݸผͷχʔζʹ ରԠ͢Δඞཁ͕͋Δ
14. ؀ڥͷ੔උ
15. ΢ΣϒΞΫηγϏϦςΟ͸ ؀ڥͷ੔උ
16. զʑ͕Vue.js΍ Nuxt.jsͰ࡞ͬͨ ΞϓϦέʔγϣϯ͸ ΞΫηγϒϧͳͷ͔
19. ࠓճͷςʔϚɿ ը໘ભҠͱΞΫηγϏϦςΟ
20. ΞδΣϯμ • ΫϥΠΞϯταΠυϧʔςΟϯάʹ͍ͭͯ • ΞΫηγϏϦςΟ্ͷݒ೦ͱվળํ๏ʹ͍ͭͯ • ࠓޙظ଴͢Δ Web API ʹ͍ͭͯ
21. ΫϥΠΞϯταΠυ ϧʔςΟϯάͱ͍͏ख๏
22. ΫϥΠΞϯταΠυϧʔςΟϯάͷར఺ • Faster page navigation • Client-side state preserved across navigation • Nested Layouts • Custom page transition animations Server Routing VS Client Routing | Vike
23. View Transitions API
26. ΑΓ؆қతʹ εϜʔζͳը໘ભҠΛ ࣮૷Ͱ͖ΔΑ͏ʹͳͬͨ
27. ը໘ભҠʹ͓͚Δ ΞΫηγϏϦςΟͷ໰୊఺
28. ໰୊఺ᶃ Կ͕มԽ͔͕ͨ͠ ࢧԉٕज़ʹ఻ΘΒͳ͍
29. ϖʔδ͕ભҠ͞Εͨ͜ͱ͕௨஌Ͱ͖͍ͯΔ͔ ࢹ֮Ͱݟͯ΋มԽ͕໌Β͔Ͱ͋ͬͯ΋ ࢧԉٕज़ʢεΫϦʔϯϦʔμʔʣͰ௨͡ͳ͍͜ͱ΋͋Δɻ ભҠͨ͜͠ͱʹؾ෇͚ͳ͍ͱɺϢʔβʔ͸ࠞཚͯ͠͠·͏ɻ
31. ARIAϥΠϒϦʔδϣϯ
32. titleཁૉΛ ARIAϥΠϒϦʔδϣϯ΁ ௨஌ͤ͞Δ
38. ໰୊఺ᶄ ϑΥʔΧεϚωδϝϯτ
40. ཁૉʹϑΥʔΧε͢Δॲཧ
42. ϝΠϯίϯςϯπΛғΉ ෦෼΁Ҡಈ͢Δ
44. ݟग़͠ཁૉ΁Ҡಈ
46. εΩοϓϦϯΫ΁ͷҠಈ
49. ϑΥʔΧεҐஔ͸ ্෦͔Β࢝·ΔΑ͏ʹ ͓ͯ͘͠ͱΑ͍
50. ໰୊఺ᶅ ա౓ͳΞχϝʔγϣϯͰ Ӿཡ્͕֐͞ΕΔ
51. ࢹࠩޮՌΛ੾Δઃఆ
52. prefers-reduced-motion
54. usePreferredReducedMotion | VueUse
57. վળͨ͠Β࣮ࡍʹ ҙਤ௨Γಈ࡞͢Δ͔ ࢼͯ͠ΈΔ
58. ը໘ભҠΛ Web API ͔Βղܾ͢Δ
59. History API
60. History API ͷ໰୊఺ • iframe಺ͷભҠ΋ؚΜͰ͠·͏ͨΊɺTop Level FrameͰཤྺΛ؅ཧ͠Α͏ͱ͢Δͱɺҙਤ͠ ͳ͍ܗͰཤྺ͕ഁյ͞ΕΔՄೳੑ͕͋Δ • ϖʔδ্Ͱൃੜ͢ΔNavigationΛ௚઀ϑοΫ͢Δํ๏͕ଘࡏ͠ͳ͍ͨΊɺશͯͷϦϯΫΫϦο ΫΛ؂ࢹ͢Δඞཁ͕͋Δɻ͔͜͠͠Ε͚ͩͰ͸׬ᘳʹભҠΛΠϯλϥϓτ͢Δ͜ͱ͸Ͱ͖ͳ͍ • ભҠΛΠϯσοΫεͰ؅ཧ͢ΔͨΊɺͲͷΠϯσοΫε͕Ͳͷঢ়ଶʹରԠ͍ͯ͠Δ͔Λผ్؅ ཧ͢Δඞཁ͕͋Δ • History APIͱϒϥ΢βͷཤྺͱͷ࿈ܞ͸ϒϥ΢βʹΑͬͯࠩҟ͕͋Δ • pushStateͰอଘ͢Δstateʹ͸੍ݶ͕ଟ͘ɺ͔ͭյΕ΍͍͢
61. Navigation API
62. Navigation API ͸Կ͕Ͱ͖Δͷ͔ • URLมߋͷҰݩ؅ཧ • φϏήʔγϣϯ৘ใͷऔಘ ◦ ը໘ભҠͷ࢝఺ͱऴ఺Λऔಘ • φϏήʔγϣϯͷΠϯλʔηϓτ ◦ φϏήʔγϣϯʹ͔͔Δ࣌ؒΛϒϥ΢β΁௨஌ ◦ φϏήʔγϣϯ͕੒ޭ͔ͨ͠Λϒϥ΢β΁௨஌
66. ͓ΘΓʹ
67. 🌐
68. ΫϥΠΞϯταΠυ ϧʔςΟϯά͸ طଘͷར఺Λࣺͯͯ ෳࡶ͞΁ͱ௅Ή֮ޛ
69. SPAͱ͍͏ཁ݅Ͱ ৽ͨͳΔମݧ΍Ձ஋Λ୳Δ
70. Nuxt.js ࣗମͷ ΞΫηγϏϦςΟ͸ Ͳ͏ͳͬͯΔͷ͔
73. Vue Fes Japan 2023 | 2023-10-28 Thanks for Listening!