はじめての WCAG 2.2 図と具体例で学ぶ解説書

解説書 / 2.4.12 隠されないフォーカス (高度)

LEARN BY EXAMPLE

2.4.12 隠されないフォーカス (高度) レベル AAA

いま操作する部品のどの部分も、別の内容で隠さない。

試作版主に関わる領域：デザイン・開発更新 2026-11-10

概要

操作部品がキーボードフォーカスを受け取ったとき、制作者が用意した内容で、その部品のどの部分も隠れないようにします。固定の案内などが重なる場合も、一部が見えるだけでは足りません。

上側だけでなく、操作部品の全体を見せる

PCやスマートフォンで講座サイトを使い、Tabキーで写真入門の詳しい説明へ進む場面です。

利用者が困る例 下側が固定の案内に隠れる

フォーカス先：写真入門の詳しい説明

上側は見えるが、部品の全体を確認できない。
全体が隠れていなくても、部分的な隠れがあるため、2.4.12の条件を満たせません。

改善した例 案内を重ならない位置に置く

Tabで順に進み、Shift＋Tabで戻れます。

講座サイト｜写真入門

構図や光の使い方を学びます

受講前に、詳しい説明をご確認ください。

写真入門の詳しい説明

被写体の配置や、光の向きによる写真の違いを学ぶ講座です。

受講前の準備

カメラ、又は撮影できるスマートフォンをご用意ください。

お申し込みの前に案内を確認してお進みください。

どの部分も案内に隠れず、全体が見える。
Enter・Spaceで説明を開いても、下の案内が一緒に移動し、部品を覆いません。

図：同じ講座案内で、固定表示に部品の一部が隠れる場合と、重ならない配置を比べたものです。問題側は静止図です。改善側は、二つの開閉部品をキーボードで操作できます。表示する枠は操作位置を示す補助で、この基準で確認するのは部品そのものです。

達成できないと起こる問題の例

画面を見ながらキーボードで操作する利用者が、PCやスマートフォンで講座サイトを開き、写真入門の内容を確かめようとしています。

Tabキーで「写真入門の詳しい説明」に進むと、画面下部の固定案内が、操作部品の下側を覆います。上側は見えていますが、文字や部品の形を全体として確認できず、何を開く場所か判断しにくくなります。

達成するための改善例

同じ案内の固定表示をやめ、ページの内容と一緒に並ぶ配置にします。説明を開く部品の後に案内を置き、互いに重ならないようにします。

利用者はTabキーで進んだときも、Shift＋Tabキーで戻ったときも、操作部品の全体を確認できます。詳しい説明を開いて内容が増えても、その下の案内も一緒に移動するため、部品を覆いません。

図の「改善した例」で、Tabキーで二つの開閉部品へ順に進んでみてください。EnterキーやSpaceキーで開閉でき、戻るときはShift＋Tabキーを使えます。

確認のポイント

  • キーボードフォーカスを受けた部品に、固定ヘッダーや固定フッターなどで隠れる部分はありませんか。
  • Tabで進むときだけでなく、Shift＋Tabで戻るときも、部品の全体を確認できますか。
  • 案内や通知、チャットなどを表示した状態でも、フォーカスを受ける部品の全体が見えますか。
  • 狭い画面や拡大表示で、固定の内容が大きくなり、部品を部分的に隠していませんか。
  • 半透明の幕、暗くする効果、ぼかしなどが、フォーカスのある部品に重なっていませんか。
  • 部品そのものの隠れと、フォーカスを示す枠などの表示を、それぞれ確認していますか。

条件と補足

2.4.11の最低限との違い

基準 部品について求める見え方
2.4.11 隠されないフォーカス (最低限)・AA 完全には隠れない。一部が見えていれば、部分的な隠れは許容される。
2.4.12 隠されないフォーカス (高度)・AAA どの部分も隠れていない。部分的な隠れもなくす。

図の「利用者が困る例」は、部品の上側が見える場面です。この見え方だけを比べると、2.4.11の条件を満たしても、2.4.12の条件は満たせません。基準一つの条件を満たすことと、サイト全体のレベルAAやAAAへの適合は別です。

対象は、ページ側の内容による隠れ

制作者が作った固定ヘッダー、固定フッター、通知、重なって表示されるパネルなどが対象です。ブラウザー自身のツールバーなどとは区別します。

不透明な内容だけでなく、半透明の幕や、ぼかし・暗くする効果が部品に重なって見えにくくなる場合も確認します。現在の英語公開解説では、こうした重なりもこの基準を満たさないと説明しています。

利用者が開いた内容などの注記

2.4.11「隠されないフォーカス (最低限)」には、利用者が位置を変えられる内容は初期位置で判定する注記があります。また、利用者が開いた内容に隠れても、キーボードフォーカスを進めずに部品を表示できれば、制作者の内容によって隠れたとはみなさない注記もあります。

この2.4.12には、同じ注記はありません。後からEscapeキーでパネルを閉じられることだけを、AAAでも部分的に隠れてよい理由にはしません。フォーカスを受けた時点で、部品の全体が見える構成を確認します。

部品と、フォーカスを示す表示

この基準で確認するのは操作部品そのものです。部品の外側に描くフォーカスの枠は、通常、部品自体には含めません。ただし、部品の内側にある表示や、部品自体の色などを変えてフォーカスを示す場合は、その部分も含みます。

2.4.7「フォーカスの可視化」は、操作位置を示す表示が見えることを扱います。2.4.13「フォーカスの外観」では、その表示の面積や明暗差などを確認します。部品が見えることだけで、これらの条件も満たしたとは判断しません。

固定表示を残す場合

固定する内容の高さなどに合わせて余白を確保し、scroll-paddingでスクロール先を調整する方法もあります。狭い画面では固定を解除する方法もあります。特定のCSSを付けたことだけで判断せず、実際にキー操作で進んだときと戻ったときの表示を確かめます。

今回の改善例では、画面幅によらず固定を解除する配置を選びました。サイト全体で、すべての固定表示を禁止するという要件ではありません。

参照資料

テクニックは達成する方法の例です。特定のCSSを使うことだけが必須ではありません。半透明の重なりの扱いは、日本語訳と現在の英語公開版に違いがあるため、英語版でも確認しています。

出典の最終確認: 2026-11-10。画面と説明文は、この教材のために作った例です。