2.4.11隠されないフォーカス（最低限）

なぜ「隠れないフォーカス」が必要なの？

ウェブサイトでよく見かける「上部に固定されたナビゲーションバー」は、 スクロールしても常に画面上部に残る便利な仕組みです。 ところが、キーボードで操作するユーザーには深刻な問題を引き起こすことがあります。

キーボードの Tab でリンクやボタンにフォーカスを移すと、 ブラウザは対象の要素が見える位置まで自動スクロールします。 しかし固定ヘッダーの高さ分だけ「視覚的に隠れた領域」があることを ブラウザは自動では考慮しません。その結果、フォーカスされた要素がヘッダーの真裏に完全に潜り込んで見えなくなることがあります。

「今どこにフォーカスがあるのか」が分からなくなると、 マウスを使えないユーザーは操作を続けることができません。 これを防ぐのが達成基準 2.4.11 の目的です。

不合格の例（フォーカスが隠れる）

下のデモは、スクロール領域の上部に position: sticky の不透明ヘッダーがある構成です。 コンテンツ側に scroll-margin-top が指定されていないため、 Tab でフォーカスが先頭の項目に移ると、ヘッダーの裏に完全に隠れてしまいます。

合格の例（scroll-margin-top で隠さない）

まったく同じ構造に、ボタンへscroll-margin-top（固定ヘッダーの高さ分）を加えただけです。 フォーカスが当たると、ブラウザが自動的にヘッダーの下に収まる位置まで スクロールしてくれます。JavaScript は不要です。

直し方（コード）

/* 1. sticky ヘッダーの高さを CSS 変数で管理する */
:root {
  --header-height: 56px; /* sticky ヘッダーの実際の高さに合わせる */
}

/* 2. フォーカスを受け取りうる要素すべてに余白を付ける
      ヘッダー高さ + 少し余裕（8px）で確実にヘッダーの下に収まる */
.page-content a,
.page-content button,
.page-content input,
.page-content select,
.page-content textarea,
.page-content [tabindex] {
  scroll-margin-top: calc(var(--header-height) + 8px);
}

/* ❌ sticky ヘッダーが不透明なのに、コンテンツ側に補正がない */
.site-header {
  position: sticky;
  top: 0;
  height: 56px;
  background: #ffffff; /* 不透明な背景でコンテンツを覆う */
  z-index: 100;
}

/* コンテンツ要素に scroll-margin-top の指定なし          */
/* → Tab でフォーカスした要素がヘッダーの裏に完全に隠れる */

チェックリスト

• ページに position: sticky / position: fixed の ヘッダー・フッターがある場合、フォーカス可能な要素にscroll-margin-top（または scroll-margin-bottom）を付けている
• Tab キーでフォーカスを移し、フォーカスされた要素が 固定要素に完全に隠れないことを実機確認している
• Cookie バナー・サポートチャット・トースト通知など、 後から表示される固定要素でも同様に確認している
• scroll-margin-top の値はヘッダー高さと連動しており、 CSS 変数などでデザイン変更に追従できる仕組みがある
• フォーカスリングを消していない（outline: none を使っていない）