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

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

Okuto Oyama
October 28, 2023
420

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

Vue Fes Japan 2023 発表資料(Web 版

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

Okuto Oyama

October 28, 2023
Tweet

Transcript

  1. • ΍·ͷ͘ • he / him • CrowdWorks, Inc. •

    Frontend Designer • 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ
  2. ΫϥΠΞϯταΠυϧʔςΟϯάͷར఺ • Faster page navigation • Client-side state preserved across

    navigation • Nested Layouts • Custom page transition animations Server Routing VS Client Routing | Vike
  3. History API ͷ໰୊఺ • iframe಺ͷભҠ΋ؚΜͰ͠·͏ͨΊɺTop Level FrameͰཤྺΛ؅ཧ͠Α͏ͱ͢Δͱɺҙਤ͠ ͳ͍ܗͰཤྺ͕ഁյ͞ΕΔՄೳੑ͕͋Δ • ϖʔδ্Ͱൃੜ͢ΔNavigationΛ௚઀ϑοΫ͢Δํ๏͕ଘࡏ͠ͳ͍ͨΊɺશͯͷϦϯΫΫϦο

    ΫΛ؂ࢹ͢Δඞཁ͕͋Δɻ͔͜͠͠Ε͚ͩͰ͸׬ᘳʹભҠΛΠϯλϥϓτ͢Δ͜ͱ͸Ͱ͖ͳ͍ • ભҠΛΠϯσοΫεͰ؅ཧ͢ΔͨΊɺͲͷΠϯσοΫε͕Ͳͷঢ়ଶʹରԠ͍ͯ͠Δ͔Λผ్؅ ཧ͢Δඞཁ͕͋Δ • History APIͱϒϥ΢βͷཤྺͱͷ࿈ܞ͸ϒϥ΢βʹΑͬͯࠩҟ͕͋Δ • pushStateͰอଘ͢Δstateʹ͸੍ݶ͕ଟ͘ɺ͔ͭյΕ΍͍͢
  4. Navigation API ͸Կ͕Ͱ͖Δͷ͔ • URLมߋͷҰݩ؅ཧ • φϏήʔγϣϯ৘ใͷऔಘ ◦ ը໘ભҠͷ࢝఺ͱऴ఺Λऔಘ •

    φϏήʔγϣϯͷΠϯλʔηϓτ ◦ φϏήʔγϣϯʹ͔͔Δ࣌ؒΛϒϥ΢β΁௨஌ ◦ φϏήʔγϣϯ͕੒ޭ͔ͨ͠Λϒϥ΢β΁௨஌