こんにちは。よっしーです(^^)
今日は、SvelteKitでのアクセシビリティについて解説しています。
背景
SvelteKitでのアクセシビリティについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
フォーカス管理
従来のサーバーレンダリングアプリケーションでは、すべてのナビゲーションでページ上部へのフォーカスがリセットされます。これにより、キーボードやスクリーンリーダーでWebを閲覧する人々が、ページの先頭から操作を開始できることを保証します。
クライアントサイドルーティング時にこの動作を再現するため、SvelteKitはナビゲーションやエンハンスドフォームの送信後に<body>要素にフォーカスを当てます。ただし、一つ例外があります – autofocus属性を持つ要素が存在する場合、SvelteKitはその要素にフォーカスを当てます。この属性を使用する際は、支援技術への影響を必ず考慮してください。
SvelteKitのフォーカス管理をカスタマイズしたい場合は、afterNavigateフックを使用できます：
import { afterNavigate } from '$app/navigation';
afterNavigate(() => {
/** @type {HTMLElement | null} */
const to_focus = document.querySelector('.focus-me');
to_focus?.focus();
});また、goto関数を使用してプログラムによる異なるページへのナビゲーションも可能です。デフォルトでは、リンクをクリックした場合と同じクライアントサイドルーティングの動作となります。ただし、gotoはフォーカスをリセットする代わりに、現在フォーカスされている要素を維持するkeepFocusオプションも受け付けます。このオプションを有効にする場合は、ナビゲーション後もフォーカスされている要素がページ上に存在することを確認してください。要素が存在しなくなると、ユーザーのフォーカスが失われ、支援技術を使用するユーザーにとって混乱を招く体験となります。
解説
このセクションでは、アクセシビリティの重要な要素であるフォーカス管理について説明しています。
主なポイント：
- フォーカス管理の基本：
- ページ遷移時のフォーカスリセット
<body>要素への自動フォーカスautofocus属性による例外処理
- カスタマイズ機能：
afterNavigateフックの使用- プログラムによるフォーカス制御
- 柔軟なフォーカス管理の実現
- プログラム的なナビゲーション：
goto関数の使用keepFocusオプションの提供- フォーカス維持時の注意点
- アクセシビリティへの配慮：
- キーボードユーザーへの対応
- スクリーンリーダーユーザーへの対応
- フォーカス管理の重要性
これらの機能により、様々なユーザーに対して適切なフォーカス管理を実現し、より良いユーザー体験を提供することが可能となっています。
おわりに
今日は、 SvelteKitでのアクセシビリティについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント