フォーカスインジケーターは、キーボード操作時に現在フォーカスされている UI 要素を視覚的に示す表示です。通常はアウトライン (枠線) やハイライト (背景色変更) で表現され、リンク、ボタン、フォーム入力欄など、インタラクティブな要素に対して表示されます。マウスを使わずにキーボードだけで Web サイトを操作するユーザーにとって、現在の操作位置を把握するための不可欠な手がかりです。

WCAG (Web Content Accessibility Guidelines) 2.2 では、フォーカスに関する達成基準が 3 つ追加されました。従来からある達成基準 2.4.7 Focus Visible (レベル AA) は、キーボードフォーカスの位置が視覚的に確認できることを求めるものです。2.2 で加わったのは 2.4.11 Focus Not Obscured (Minimum) (レベル AA)、2.4.12 Focus Not Obscured (Enhanced) (レベル AAA)、2.4.13 Focus Appearance (レベル AAA) の 3 つです。前の 2 つは、固定ヘッダーや Cookie バナーのように後から重なる要素によってフォーカス中の要素が覆われないことを求める基準で、AA では完全に隠れることが不可、AAA では一部でも隠れることが不可となります。

インジケーターの見た目そのものに数値を課すのは 2.4.13 Focus Appearance で、こちらはレベル AAA です。要求は 2 点あり、非フォーカス時のコンポーネントの外周を 2 CSS ピクセルの太さで囲んだ面積以上の広さを持つこと、そしてフォーカス時と非フォーカス時で同じピクセルを比べたコントラスト比が 3:1 以上あることです。この「2 ピクセル」と「3:1」を AA の必須要件として渡される設計指示を見かけますが、AA の範囲で求められるのは「見えること」と「隠れないこと」までで、太さと比率は AAA 側だと切り分けて読むのが正確です。

CSS の :focus-visible 疑似クラスは、フォーカスインジケーターの実装において重要な役割を果たします。従来の :focus はマウスクリック時にもフォーカスリングを表示してしまい、デザイナーが outline: none で無効化するケースが多発しました。:focus-visible を使うと、インジケーターを「いつ出すか」の判断はブラウザに任せたまま、「どう見せるか」だけを指定できます。判定はブラウザのヒューリスティクスによるもので、キーボードで移動してフォーカスした場合は表示され、ボタンやリンクをマウスでクリックした場合は通常表示されません。ここで誤解しやすいのがテキスト入力欄の扱いです。入力を待ち続ける要素はマウスでクリックした場合でも :focus-visible がマッチするため、「クリックでは出ない」という前提でデザインを組むと、入力欄だけ枠が出て想定と食い違います。

よくある誤りとして、outline: none や outline: 0 でフォーカスインジケーターを完全に消してしまうケースがあります。背景色の変化や下線など代わりの視覚的変化を何も用意しないまま消すと、達成基準 2.4.7 (レベル AA) を満たせません。逆に言えば、アウトラインを消して box-shadow などで同等以上の表示を与えているなら、それ自体が不適合になるわけではありません。問題は「消したまま何も足さない」ことです。デフォルトのブラウザスタイルが気に入らない場合は、サイトのデザインに合ったカスタムフォーカススタイルを設定します。たとえば :focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; } のような指定が出発点になります。

フォーカスインジケーターの設計では、ダークモードとライトモードの両方で十分なコントラストを確保することも重要です。上の例で使った #4A90D9 は、白 (#FFFFFF) 背景に対するコントラスト比が約 3.3:1 で、3:1 という目安をわずかに超える程度しかありません。背景が薄いグレー (#E0E0E0) になると約 2.5:1 まで落ち、目安を下回ります。outline-offset で隙間を空けた分だけ枠の外周にも背景色が接するため、確認すべきは「枠の色と、その枠が実際に接している色」の関係です。明暗どちらの背景にも耐える色を選ぶか、モードごとにフォーカス色を切り替えるのが確実です。背景色が変わるとフォーカスリングが見えにくくなる場合があるため、box-shadow を併用して内側に明色・外側に暗色の二重のインジケーターを設定する手法も有効です。また、カスタムコンポーネント (ドロップダウンメニュー、モーダルダイアログなど) では、フォーカス管理を JavaScript で適切に実装し、フォーカストラップやフォーカスの復元を正しく処理する必要があります。

文字数カウントとの関連では、フォーカスインジケーターはテキスト入力フィールドで特に重要な役割を果たします。文字数カウントツールのように複数の入力欄を持つインターフェースでは、ユーザーがどのフィールドに入力中かを明確に示すことで、操作ミスを防ぎ、効率的なテキスト入力を支援します。入力中のフィールドに対して目立つフォーカスインジケーターを設定することは、ユーザビリティの向上に直結します。