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

キーボードフォーカスを受けた操作要素が、画面上部に固定されたヘッダー、固定フッター、Cookie同意バナー、チャットウィジェット等によって完全に覆い隠されないようにします。

Level AA 確認方法: 手動確認

意図的な失敗例: フォーカスが固定ヘッダーに隠れる

固定ヘッダーの下にフォーカス対象が隠れます。

隠れるリンク

確認観点

固定ヘッダーや固定フッターが存在するページで、Tabキーを押して順次フォーカスを移動する
スクロール時にフォーカス対象が固定ヘッダーの背後に潜り込まないよう、CSSの scroll-margin-top や scroll-padding-top を適切に設定する
フローティングボタンやCookieバナーの背後に要素が隠れないよう配置と余白を調整する

人の判断が必要な例

フォーカス表示の一部が多少隠れても、操作要素自体が完全に覆い隠されていないか確認する
固定UIがある場合でも、scroll-margin等によってフォーカスされた要素が隠れずに視認できるか確認する
レスポンシブ表示で固定UIの高さが変わっても、フォーカス要素を覆い隠さないか確認する

補助ツール候補

fixed-header-overlap
focus-visibility

生成メモ

manual-judgment-catalog.ja.json の内容から生成しています。