Level AAWCAG 2.2
2.4.11 フォーカスが隠れない（最低限）
フォーカスを受け取った要素が完全に隠れないようにする。
なぜ重要か
キーボードユーザー
フォーカスが固定ヘッダーの下に隠れると、現在位置を完全に見失い操作不能になる。
ロービジョン
画面拡大使用時に可視領域が狭いため、隠れたフォーカス要素を見つけるのがさらに困難。
運動障害
隠れた要素を可視領域に戻すための追加操作は、限られた動きのユーザーに大きな負担。
モバイルユーザー
スマートフォンの小さな画面では、固定バナーやCookieバーがフォーカス要素を隠しやすい。
ライブデモ
固定要素によるフォーカスの遮蔽
Tab キーでフォームを移動し、下部のフィールドがスティッキー要素に隠れないか確認しましょう。
固定ヘッダー
固定フッター
下部のフィールドにフォーカスすると固定要素に隠れる
固定ヘッダー・フッター・バナーがフォーカス要素を隠すと、 キーボードユーザーは現在位置を見失います。
scroll-padding や JavaScript での調整で、フォーカス要素が常に可視領域に表示されるようにしましょう。ペルソナで理解する
木村さん（33歳）— 頸髄損傷
口に咥えたスティックでキーボードを操作しています。Tabキーを押してフォーカスが固定ヘッダーの下に隠れると、どこにフォーカスがあるかわからず、スクロールし直すのに何分もかかることがあります。