2.4.12 隠されないフォーカス (高度)

達成基準 2.4.12 隠されないフォーカス（高度）【AAA】

キーボードユーザーがフォーカス可能なコンポーネントにフォーカスを移動したときに、フォーカスインジケーターの全体が可視である必要があります。

要件

項目	内容
対象	キーボード操作可能なすべてのインターフェースコンポーネント（リンク・ボタン・入力欄など）
必須条件	フォーカスされた要素のすべての部分が画面に表示されていること（完全表示）
達成レベル	AAA（最高レベルのアクセシビリティ）
適用場面	特にキーボード・スイッチデバイス・スクリーンリーダーユーザーを支援する目的で適用される

達成している例

• フォーカス対象がある要素が、自動的にスクロールして完全に画面内に表示される
• 固定ヘッダーやサイドメニューが、フォーカス対象を覆わないようにオフセット調整されている
• モーダル内でTabキー移動しても、毎回要素全体が見えるようにスクロールされる

未達成の例

• 固定ナビゲーションにフォーカス対象の一部が隠れる（例：上半分がヘッダーで隠れる）
• 水平方向のスクロールが必要なレイアウトで、フォーカスされたボタンが途中までしか見えない
• JavaScriptでフォーカスを移動しても、スクロール位置が調整されず、半分隠れている

実装時の注意点

問題	解決方法
固定ヘッダーがかぶる	scrollIntoView({ block: "center", behavior: "smooth" }) + ヘッダー高さを考慮したオフセット処理
カスタムコンポーネントが表示外になる	JavaScriptやCSSで、フォーカス時のスクロール領域を調整
親要素の overflow: hidden によりスクロールできない	overflow: auto を適用、もしくは構造自体の見直し

2.4.11との違い（比較表）

項目	2.4.11（最低限）	2.4.12（高度）
レベル	AA	AAA
要件	一部でも見えていればOK	全体が完全に可視であること
例外の許容度	やや高い	ほぼゼロ。フォーカスインジケーターが完全に見える必要あり
対応の難易度	比較的容易	実装やデザインによっては調整が難しいことも

利点

観点	内容
操作性	ユーザーがフォーカスの位置を正確に把握しやすくなる
アクセシビリティ強化	ロービジョンや視覚認知の支援がより強力に
ユーザビリティ向上	UI設計がより一貫性を持ち、インタラクション時のストレスが軽減される

テスト方法（チェックリスト）

•  Tabキーで移動したとき、要素の全体が常に画面に表示されていますか？
•  モーダル内でのフォーカス移動時に一部が隠れていませんか？
•  固定コンテンツとフォーカスインジケーターの重なりがありませんか？
•  スクロール操作で調整されるようにスクリプト処理されていますか？

まとめ

項目	内容
達成基準	2.4.12 隠されないフォーカス（高度）
適合レベル	AAA（WCAG 2.2）
要件	キーボードフォーカスされた要素の全体が画面に見えていること
実装ポイント	スクロール制御、オフセット処理、固定要素の配慮
対象ユーザー	キーボードユーザー、視覚的支援が必要なユーザー全般

一覧に戻る