2.4.11 隠されないフォーカス (最低限) レベルAA 原則2 操作可能
固定ヘッダの裏に隠れる
スクロールしても画面の上に残り続けるヘッダは便利です。でもキーボードで前の項目へ戻ると、フォーカスした項目がちょうどヘッダの裏に入り、どこにいるか見えなくなることがあります。WCAG 2.2 で新しく加わった基準です。
さわってみよう
「いちばん下の項目へ移動」を押してから、Shift+Tab で上の項目へ戻っていこう。フォーカスした項目は見えるかな。
文化祭 2026
ステージ発表の一覧
押したあとは、Shift キーを押したまま Tab キーを押すと、1つ前の項目へ戻ります。
フォーカス中の項目：（まだ見本の外）
直してみよう
scroll-padding-top を変えて、いちばん下から Shift+Tab でいちばん上まで戻るあいだ、項目が一度も完全には隠れないようにしよう。
文化祭 2026
ステージ発表の一覧
ヘッダの高さ：
フォーカス中の項目：（まだ見本の外）
分かったこと
- フォーカスを受け取った部品が、ページ側で置いたもの（固定ヘッダ・固定フッタ・お知らせの帯など）に全部隠れてしまわないようにする。
- ブラウザは、フォーカスした部品を画面の端までしかスクロールしない。貼りついたヘッダのことは知らない。
- CSS の
scroll-padding-topをヘッダの高さ以上にすると、スクロールがヘッダの下で止まるようになる。 - レベルAA の 2.4.11 は「全部は隠れない」ことを求める。一部も隠れないことまで求めるのは 2.4.12（レベルAAA）。
- WCAG 2.2 で新しく加わった達成基準。
利用者が自分で開いたメニューが重なる場合などの扱いは、WCAG 2.2 の日本語訳で確かめよう。