$30 off During Our Annual Pro Sale. View Details »

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

Okuto Oyama
October 28, 2023
0
220

画面遷移から考える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

More Decks by Okuto Oyama

See All by Okuto Oyama
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
2.5k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
4.9k
PWA is Progressive Web Accessibility
yamanoku
0
42
PWA RTA in Japan 2020
yamanoku
0
75
Material Designとは何かを知る会
yamanoku
1
730

Featured

See All Featured
In The Pink: A Labor of Love
frogandcode
135
21k
Into the Great Unknown - MozCon
thekraken
7
650
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.4k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The World Runs on Bad Software
bkeepers
PRO
59
6.1k
Teambox: Starting and Learning
jrom
125
8.2k
Adopting Sorbet at Scale
ufuk
66
8.2k
What's in a price? How to price your products and services
michaelherold
236
10k
Gamification - CAS2011
davidbonilla
75
4.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.7k
What's new in Ruby 2.0
geeforr
336
30k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
12k

Transcript

  1. ը໘ભҠ͔Βߟ͑Δ
    Nuxt ΞϓϦέʔγϣϯΛ
    ΞΫηγϒϧʹ͢Δํ๏
    Vue Fes Japan 2023 | 2023-10-28

    View Slide

  2. ͸͡Ίʹ

    View Slide

  3. ● ΍·ͷ͘
    ● he / him
    ● CrowdWorks, Inc.
    ● Frontend Designer
    ● 🏡 👪 🐱 🐱 🐱 🐶
    ࣗݾ঺հ

    View Slide

  4. ΢ΣϒΞΫηγϏϦςΟ

    View Slide

  5. Access + Ability
    = Accessibility (A11y)

    View Slide

  6. ʮར༻ऀͷো֐ͷ༗ແ΍ͦͷఔ౓ɺ೥
    ྸ΍ར༻؀ڥʹ͔͔ΘΒͣɺ΢ΣϒͰ
    ఏڙ͞Ε͍ͯΔ৘ใ΍αʔϏεΛར༻
    Ͱ͖Δ͜ͱɺ·ͨ͸ͦͷ౸ୡ౓ʯ
    ΢ΣϒΞΫηγϏϦςΟಋೖΨΠυϒοΫʛσδλϧி

    View Slide

  7. ΢Σϒ͸ͦ΋ͦ΋
    ΞΫηγϒϧͳ΋ͷ

    View Slide

  8. ো֐౰ࣄऀ΋
    ΢ΣϒαʔϏεΛ࢖͍ͬͯΔ

    View Slide

  9. ࢧԉٕज़ར༻ऀͷঢ়گΛ஌Δ
    ● ύιίϯ΍εϚʔτϑΥϯͷ༻్ʹ͍ͭͯ
    ○ Webݕࡧɺχϡʔεɾ৽ฉͷӾཡɺϒϩάɾSNSͷӾཡɺ
    ֎ग़࣌ͷφϏήʔγϣϯɺ৐Γ׵͑ݕࡧɺγϣοϐϯάɺ
    ۚ༥αʔϏεͷޱ࠲ͷঢ়گ֬ೝɺϚΠϙʔλϧ΍ϚΠφϯ
    όʔΧʔυΛར༻֤ͨ͠छखଓ͖౳
    ୈ3ճࢧԉٕज़ར༻ঢ়گௐࠪใࠂॻ | ೔ຊࢹ֮ো֐ऀICTωοτϫʔΫ

    View Slide

  10. վਖ਼ো֐ऀࠩผղফ๏ͱ
    ؀ڥͷ੔උ

    View Slide

  11. ϦʔϑϨοτʮྩ࿨̒೥݄̐̍೔͔Β߹ཧత഑ྀͷఏڙ͕ٛ຿Խ͞Ε·͢ʂʯ - ಺ֳ෎

    View Slide

  12. ߹ཧత഑ྀͷఏڙ | ো֐ऀͷࠩผղফʹ޲͚ͨཧղଅਐϙʔλϧαΠτ

    View Slide

  13. ʮ߹ཧత഑ྀʯ͸
    ݸผͷχʔζʹ
    ରԠ͢Δඞཁ͕͋Δ

    View Slide

  14. ؀ڥͷ੔උ

    View Slide

  15. ΢ΣϒΞΫηγϏϦςΟ͸
    ؀ڥͷ੔උ

    View Slide

  16. զʑ͕Vue.js΍
    Nuxt.jsͰ࡞ͬͨ
    ΞϓϦέʔγϣϯ͸
    ΞΫηγϒϧͳͷ͔

    View Slide

  17. View Slide

  18. View Slide

  19. ࠓճͷςʔϚɿ
    ը໘ભҠͱΞΫηγϏϦςΟ

    View Slide

  20. ΞδΣϯμ
    ● ΫϥΠΞϯταΠυϧʔςΟϯάʹ͍ͭͯ
    ● ΞΫηγϏϦςΟ্ͷݒ೦ͱվળํ๏ʹ͍ͭͯ
    ● ࠓޙظ଴͢Δ Web API ʹ͍ͭͯ

    View Slide

  21. ΫϥΠΞϯταΠυ
    ϧʔςΟϯάͱ͍͏ख๏

    View Slide

  22. ΫϥΠΞϯταΠυϧʔςΟϯάͷར఺
    ● Faster page navigation
    ● Client-side state preserved across navigation
    ● Nested Layouts
    ● Custom page transition animations
    Server Routing VS Client Routing | Vike

    View Slide

  23. View Transitions API

    View Slide

  24. View Slide

  25. View Slide

  26. ΑΓ؆қతʹ
    εϜʔζͳը໘ભҠΛ
    ࣮૷Ͱ͖ΔΑ͏ʹͳͬͨ

    View Slide

  27. ը໘ભҠʹ͓͚Δ
    ΞΫηγϏϦςΟͷ໰୊఺

    View Slide

  28. ໰୊఺ᶃ
    Կ͕มԽ͔͕ͨ͠
    ࢧԉٕज़ʹ఻ΘΒͳ͍

    View Slide

  29. ϖʔδ͕ભҠ͞Εͨ͜ͱ͕௨஌Ͱ͖͍ͯΔ͔
    ࢹ֮Ͱݟͯ΋มԽ͕໌Β͔Ͱ͋ͬͯ΋
    ࢧԉٕज़ʢεΫϦʔϯϦʔμʔʣͰ௨͡ͳ͍͜ͱ΋͋Δɻ
    ભҠͨ͜͠ͱʹؾ෇͚ͳ͍ͱɺϢʔβʔ͸ࠞཚͯ͠͠·͏ɻ

    View Slide

  30. View Slide

  31. ARIAϥΠϒϦʔδϣϯ

    View Slide

  32. titleཁૉΛ
    ARIAϥΠϒϦʔδϣϯ΁
    ௨஌ͤ͞Δ

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. ໰୊఺ᶄ
    ϑΥʔΧεϚωδϝϯτ

    View Slide

  39. View Slide

  40. ཁૉʹϑΥʔΧε͢Δॲཧ

    View Slide

  41. View Slide

  42. ϝΠϯίϯςϯπΛғΉ
    ෦෼΁Ҡಈ͢Δ

    View Slide

  43. View Slide

  44. ݟग़͠ཁૉ΁Ҡಈ

    View Slide

  45. View Slide

  46. εΩοϓϦϯΫ΁ͷҠಈ

    View Slide

  47. View Slide

  48. View Slide

  49. ϑΥʔΧεҐஔ͸
    ্෦͔Β࢝·ΔΑ͏ʹ
    ͓ͯ͘͠ͱΑ͍

    View Slide

  50. ໰୊఺ᶅ
    ա౓ͳΞχϝʔγϣϯͰ
    Ӿཡ્͕֐͞ΕΔ

    View Slide

  51. ࢹࠩޮՌΛ੾Δઃఆ

    View Slide

  52. prefers-reduced-motion

    View Slide

  53. View Slide

  54. usePreferredReducedMotion | VueUse

    View Slide

  55. View Slide

  56. View Slide

  57. վળͨ͠Β࣮ࡍʹ
    ҙਤ௨Γಈ࡞͢Δ͔
    ࢼͯ͠ΈΔ

    View Slide

  58. ը໘ભҠΛ
    Web API ͔Βղܾ͢Δ

    View Slide

  59. History API

    View Slide

  60. History API ͷ໰୊఺
    ● iframe಺ͷભҠ΋ؚΜͰ͠·͏ͨΊɺTop Level FrameͰཤྺΛ؅ཧ͠Α͏ͱ͢Δͱɺҙਤ͠
    ͳ͍ܗͰཤྺ͕ഁյ͞ΕΔՄೳੑ͕͋Δ
    ● ϖʔδ্Ͱൃੜ͢ΔNavigationΛ௚઀ϑοΫ͢Δํ๏͕ଘࡏ͠ͳ͍ͨΊɺશͯͷϦϯΫΫϦο
    ΫΛ؂ࢹ͢Δඞཁ͕͋Δɻ͔͜͠͠Ε͚ͩͰ͸׬ᘳʹભҠΛΠϯλϥϓτ͢Δ͜ͱ͸Ͱ͖ͳ͍
    ● ભҠΛΠϯσοΫεͰ؅ཧ͢ΔͨΊɺͲͷΠϯσοΫε͕Ͳͷঢ়ଶʹରԠ͍ͯ͠Δ͔Λผ్؅
    ཧ͢Δඞཁ͕͋Δ
    ● History APIͱϒϥ΢βͷཤྺͱͷ࿈ܞ͸ϒϥ΢βʹΑͬͯࠩҟ͕͋Δ
    ● pushStateͰอଘ͢Δstateʹ͸੍ݶ͕ଟ͘ɺ͔ͭյΕ΍͍͢

    View Slide

  61. Navigation API

    View Slide

  62. Navigation API ͸Կ͕Ͱ͖Δͷ͔
    ● URLมߋͷҰݩ؅ཧ
    ● φϏήʔγϣϯ৘ใͷऔಘ
    ○ ը໘ભҠͷ࢝఺ͱऴ఺Λऔಘ
    ● φϏήʔγϣϯͷΠϯλʔηϓτ
    ○ φϏήʔγϣϯʹ͔͔Δ࣌ؒΛϒϥ΢β΁௨஌
    ○ φϏήʔγϣϯ͕੒ޭ͔ͨ͠Λϒϥ΢β΁௨஌

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. ͓ΘΓʹ

    View Slide

  67. 🌐

    View Slide

  68. ΫϥΠΞϯταΠυ
    ϧʔςΟϯά͸
    طଘͷར఺Λࣺͯͯ
    ෳࡶ͞΁ͱ௅Ή֮ޛ

    View Slide

  69. SPAͱ͍͏ཁ݅Ͱ
    ৽ͨͳΔମݧ΍Ձ஋Λ୳Δ

    View Slide

  70. Nuxt.js ࣗମͷ
    ΞΫηγϏϦςΟ͸
    Ͳ͏ͳͬͯΔͷ͔

    View Slide

  71. View Slide

  72. View Slide

  73. Vue Fes Japan 2023 | 2023-10-28
    Thanks for Listening!

    View Slide