2.4.7 フォーカスの可視化

要件

キーボードで操作可能なインタフェースコンポーネントに対して、フォーカスが現在どこにあるのか視覚的に分かるようにすること。

内容のポイント

項目	説明
フォーカスとは？	現在、キーボード操作を受け付けているUI要素のこと（例：ボタン、リンク、入力欄など）
フォーカス可視化とは？	フォーカス中の要素に枠線・背景色・下線・アウトラインなどの視覚的な変化があること
対象となる操作	TabやShift + Tabキーなどで移動できる操作全般

OK な実装例

<a href="#" class="focus-visible-link">リンクテキスト</a>

<style>
.focus-visible-link:focus {
  outline: 2px solid #4A7EBB;
  outline-offset: 4px;
}
</style>

• outline で明確な境界が表示される
• 色コントラストが十分にある（WCAG 2.4.11 を満たすとより望ましい）

NG な例

例	なぜNG？
outline: none; を指定している	フォーカスが見えなくなる
:focusのスタイルが何もない	視覚的に状態が分からない
フォーカス移動自体が発生しない	<div>などにスクリプトでイベント付与のみで、Tabキーでアクセスできない場合など

よくある誤解と注意点

誤解	実際は
デザインをすっきりさせるために outline: none を使う	NG。代わりに明確なスタイルを追加する必要がある
マウス操作が中心なので不要	キーボードユーザー、支援技術ユーザーへの配慮が必要

利点

• 現在の操作対象が明確になり、誤操作防止につながる
• 視覚的に注意を向けやすくなり、ユーザビリティが向上
• 視覚・運動障害を持つユーザーも、操作状況を把握可能

チェックリスト

チェック項目	内容
:focus にスタイルが設定されているか？	明確な視覚変化があるか
枠線・背景色などは十分に見やすいか？	コントラストが不足していないか
キーボード操作で全てのインタラクティブ要素にアクセス可能か？	TabやShift+Tabで巡回できるか
outline: none を使っていないか？	使っている場合は代替スタイルがあるか

まとめ

項目	内容
達成基準	2.4.7 フォーカスの可視化
レベル	A
要件	キーボード操作でのフォーカス状態を視覚的に表示する
推奨方法	outlineやborder、背景色などで明確に表示
効果	操作中の要素が把握しやすく、ミスを防げる

視覚的にフォーカスを示すことは、操作の安心感とミス防止の観点から非常に重要です。
貴社サイトでも「Tabキーで移動でき、どこにいるか分かるか？」を基本とした検証をお勧めします。

一覧に戻る