WCAG 2.2 ガイドライン「2.4.11 フォーカスが隠れない（最低限）」Level AA について
はじめに
WCAG 2.2の「2.4.11 フォーカスが隠れない（最低限）」は、キーボードで操作中にフォーカスされた要素が、コンテンツやデザインの影響で完全に隠されないようにすることを求めています。この基準は、キーボードユーザーが現在フォーカスしている要素を視覚的に確認しやすくすることを目的としています。
1. 基準の概要
要件
- キーボード操作でフォーカスされた要素が、開発者が作成したコンテンツによって完全に隠されない。
- 必要であれば、スクロールや位置調整によってフォーカスが見える状態を確保する。
注意点
- ユーザーが移動可能なコンテンツの場合、その初期位置がテスト対象となります。
- ユーザーによって開かれたコンテンツがフォーカスを一時的に隠す場合でも、キーボード操作なしでフォーカスを再表示できれば問題ありません。
2. 実装方法
a. CSSのscroll-paddingを使用する
フォーカスされた要素がスクロール時に隠れないように、scroll-paddingを設定します。
例: フォーカスされた要素をスクロール位置に合わせる
CSS
html {
scroll-padding-top: 50px; /* 固定ヘッダー分の余白を確保 */
}
この設定により、固定ヘッダーがある場合でも、フォーカスされた要素が隠れずに表示されます。
b. JavaScriptを使用してスクロールを調整する
フォーカスされた要素が隠れてしまう場合、JavaScriptを使用してスクロール位置を調整します。
例: JavaScriptでスクロール位置を調整
JavaScript
document.querySelectorAll('a, button, input').forEach(element => {
element.addEventListener('focus', () => {
element.scrollIntoView({ block: 'center' });
});
});
scrollIntoViewメソッドを使って、フォーカスされた要素が常に視界に入るようにします。
c. 固定ヘッダーやフッターを避ける設計
固定ヘッダーやフッターがフォーカスを隠す原因となる場合があります。これを防ぐため、デザインを調整します。
例: 固定ヘッダーがある場合の対応
CSS
header {
position: fixed;
top: 0;
height: 60px;
width: 100%;
z-index: 1000;
}
main {
margin-top: 60px; /* ヘッダー分の余白を確保 */
}
3. よくある失敗例とその改善策
a. 固定ヘッダーがフォーカスを隠す
失敗例
- 固定ヘッダーがフォーカスされた要素を完全に隠してしまう。
改善策
scroll-paddingを設定する。- スクロール位置を調整するスクリプトを追加する。
b. モーダルやポップアップがフォーカスを隠す
失敗例
- フォーカスされた要素がモーダルやポップアップによって隠れる。
改善策
- ポップアップが表示された場合、フォーカスが見える位置に移動するスクリプトを実装。
4. アクセシビリティのメリット
a. キーボードユーザーの操作性向上
- フォーカスされた要素が視覚的に確認しやすくなり、ナビゲーションが効率的になります。
b. 視覚的手がかりの提供
- 現在操作中の要素が隠れないことで、すべてのユーザーがページの状態を把握しやすくなります。
c. デザインの一貫性
- コンテンツが正しく見えるようになり、全体的なデザインが整います。
5. テスト方法
a. 手動テスト
- キーボード（Tabキー）を使用して、フォーカスが視覚的に確認できるか確認。
- 固定ヘッダーやポップアップがフォーカスされた要素を隠さないかチェック。
b. 自動テストツール
- AxeやWAVEを使用して、フォーカスインジケーターやスクロール位置を検証。
c. スクリーンリーダーテスト
- スクリーンリーダーでフォーカスが正しく読み上げられるか確認。
まとめ
WCAG 2.2の「2.4.11 フォーカスが隠れない（最低限）」は、キーボード操作時にフォーカスが完全に隠れないようにすることを目的としています。
実装ポイント
- CSSの
scroll-paddingを活用してスクロール位置を調整する。 - 固定ヘッダーやフッターがフォーカスを隠さないデザインを採用する。
- JavaScriptを使用して、動的にスクロール位置を調整する。
これにより、すべてのユーザーが快適に操作できるアクセシブルなウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。