2.4.11 隠されないフォーカス (最低限)

達成基準 2.4.11 隠されないフォーカス（最低限）【AA】

キーボード操作によって操作可能なインターフェース コンポーネントにフォーカスを移動させた際、そのフォーカスインジケーターが完全に視覚的に隠されてはならない。

要件

観点	内容
対象	キーボードで操作可能な要素（ボタン・リンク・フォームなど）
条件	フォーカスが当たったときに 少なくとも一部が画面に見える 必要がある（完全に隠れてはいけない）
適用	画面の一部が固定要素（ヘッダー、フッター、モーダル等）で覆われていても、フォーカスされた要素が視認可能であること

例：達成している状態

• ヘッダー固定（position: fixed）でも、スクロールによりフォーカスされたリンクが画面内に見えている
• モーダル内のフォームでTab移動しても、次の要素が見える位置までスクロールされる
• カスタムドロップダウン内でキーボードナビゲーション時、選択項目がはみ出さず表示されている

例：達成していない状態

• キーボードでTabキーを押したら、画面外の要素にフォーカスが当たり、ユーザーに見えない
• 固定ヘッダーの裏側にリンクが隠れてしまい、フォーカスがどこにあるか分からない
• スクロールされずに、フォーカスインジケーターが非表示のまま

よくある問題と対策

問題	解決策
固定ヘッダーに隠れる	JavaScriptでフォーカス時に自動スクロール + オフセット調整（例: scrollIntoView({ block: 'center' })）
カスタムUIで表示がずれる	フォーカスリングの位置や背景とのコントラストを調整
モーダルでフォーカスが外に出る	モーダル内のフォーカストラップとスクロール制御を正しく設定

利点

観点	内容
視認性向上	フォーカス中の項目が明確になることで、視覚障害のある方にも操作意図が伝わる
操作性向上	キーボード利用者が「今どこにいるか」を常に把握できる
実装が比較的容易	多くのケースで scrollIntoView() などの簡単なJS処理で対応可能

チェックポイント

• Tabキーでフォームやリンクを移動したとき、画面上にフォーカスされた要素が見えるか？
• 要素がモーダルやドロワー内にあっても、スクロールによって表示されているか？
• CSSやJSで、固定コンテンツに重ならないような配慮があるか？

まとめ

項目	内容
達成基準名	2.4.11 隠されないフォーカス（最低限）
適合レベル	AA（WCAG 2.2で新規追加）
目的	フォーカスされたUI要素が、画面上で見える位置にあることを保証
注意点	モバイル、固定ヘッダー、カスタムスクロール領域で特に問題が出やすい
推奨対策	JavaScriptでの自動スクロール制御、オフセット考慮、ARIA使用の検討

一覧に戻る