画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法
https://vuefes.jp/2023/sessions/yamanoku/__og_image__/og.png
しかし、これらの手法は情報が正しく伝わるかどうかのアクセシビリティ観点から考慮が必要なものです。 本セッションでは、画面遷移時にどのように情報が伝わっているのか、Nuxt アプリケーションをよりアクセシブルにするためのアプローチを実装例を元に紹介します。 いわゆる「SPA的な挙動・遷移」とするものをここでは指すようにする
サーバーサイド側からではなくJSとWeb APIを活用してクライアント側でルーティングすること Client Routing enables:
Faster page navigation.
Client-side state preserved across navigation.
Nested Layouts.
入れ子レイアウト
Custom page transition animations.
NuxtのTransitionsについて
対応ブラウザじゃないと動かない
使い方
画面が切り替わったこと、変化したことが伝わらない問題
操作位置が元に戻る可能性
意図せぬ場所へ移動してしまい現在位置を見失う可能性
様々なもので使用している
従業員が一定規模であれば障害当事者の割合を法定雇用率以上にする必要がある 概要について説明
個別対応するのをずっとやっていかないといけないのか？
https://www.youtube.com/watch?v=2gESGUHjUCs
definePageMetaを使う
definePageMeta
code:js
definePageMeta({
title: 'ページタイトル'
});
512 という数字が気になる
debounce と title watcher で実装し直したいらしい
bodyに移動させる、が基本形
ではあるが。。。
code:vue.html
<template>
<main ref="main">
<slot />
</main>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const mainRef = ref(null);
onMounted(() => {
mainRef.value.focus();
});
</script>
この場合、mainにあるslot内部を全部読み上げてしまうかも知れない
場合によっては違う位置が好ましいこともあるかもしれない
１ページの中で他のコンポーネントの状態を変化させる
Layout 内にフォーカスが移動する
code:html
<p aria-live="assertive" tabindex="-1" role="alert">
{{ title }}
</p>
変化・更新される部分をより小さく、影響範囲を低くする意図
https://gyazo.com/88fbc958740d9cfb0938073f4b7d60d0
共通のコンテンツであれば
本当にそこに戻すのでよいのか正しいのか？を疑う
余計な世話で操作の機会を奪ってないか？
autofocusで強制的にフォーカスを奪っている場合もある アプリである場合、遷移した後にナビゲーションのリンクに移動してしまう場合
状況・コンテキストによってどの位置が正しいかはユーザーインタビューなどを通じて知りたい部分でもある（正解はない） code:ViewTransitionsAPI_ignore.css
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
code:all_animation_ignore.css
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
code:prefers-reduced-motionを取得する場合.js
window.matchMedia('(prefers-reduced-motion: reduce)');
If entry's scroll restoration mode is "auto", and entry's document's relevant global object's navigation API's suppress normal scroll restoration during ongoing navigation is false, then restore scroll position data given entry.
scrollBehaviorのsavedPositionで保持
BFCacheがある場合で位置を保持しておりsavedPositionがあればそれを返す code:ts
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
},
コードリーディングしてみる
ScrollBehaviorHandler自体は使用されていない？
code:ts
/**
* Scroll position similar to
* Note that not all browsers support behavior.
*/
export type ScrollPositionCoordinates = {
left?: number
top?: number
}
Nuxt、フレームワークごとでの改善を考えるのもそうだがWeb標準でどう解決できるか考えたい ページ上で発生する Navigation をフックする方法がないため、全てのリンクのクリックを監視するといったことをしないといけない。それでも完璧にはインタラプトしきれない。 遷移をインデックス(history.go(-2))で管理するために、どのインデックスがどの状態か、別途マッピングを管理する必要がある。 pushState で保存する state には制限が多く、かつ壊れやすい。
pushStateは、新しいコンテンツが存在することを、ブラウザ、そして、その範囲によって、スクリーンリーダーに何も知らせないので、スクリーンリーダーのユーザーは、新しいコンテンツが存在すること、あるいは、新しいページへのナビゲーションが成功したことを知る方法がありません。さらに、フォーカスは、予測可能な方法でリセットされるのではなく、それがあった場所にとどまります。 使い方
scroll: 'manual'で独自設定ができる
focusReset: 'manual'で独自設定ができる
まとめ
ブラウザとは偉大である
再開発することになる覚悟をもつ必要
視野には入ってる
今後の取組に期待！
5.8 画面遷移