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

WCAG (Web Content Accessibility Guidelines) 2.2 では、フォーカスインジケーターに関する基準が大幅に強化されました。達成基準 2.4.7 (レベル AA) では「フォーカスが視覚的に確認できること」が求められ、2.4.11 (レベル AA) では最小面積として 2px 以上のアウトラインまたは同等の視覚的変化が必要とされています。さらに 2.4.12 (レベル AAA) では、フォーカスインジケーターのコントラスト比が 3:1 以上であることが推奨されます。アクセシビリティ CSS の書籍で実装方法を学べます。

CSS の :focus-visible 疑似クラスは、フォーカスインジケーターの実装において重要な役割を果たします。従来の :focus はマウスクリック時にもフォーカスリングを表示してしまい、デザイナーが outline: none で無効化するケースが多発しました。:focus-visible を使えば、キーボード操作時のみフォーカスインジケーターを表示し、マウスクリック時は非表示にする制御が可能です。これにより、視覚的な美しさとアクセシビリティを両立できます。

よくある誤りとして、outline: none や outline: 0 でフォーカスインジケーターを完全に消してしまうケースがあります。これはキーボードユーザーのアクセシビリティを著しく損なう行為であり、WCAG 違反に該当します。デフォルトのブラウザスタイルが気に入らない場合は、消すのではなく、サイトのデザインに合ったカスタムフォーカススタイルを設定すべきです。たとえば :focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; } のように、視認性の高いスタイルを適用する方法が推奨されます。

フォーカスインジケーターの設計では、ダークモードとライトモードの両方で十分なコントラストを確保することも重要です。背景色が変わるとフォーカスリングが見えにくくなる場合があるため、box-shadow を併用して二重のインジケーターを設定する手法も有効です。また、カスタムコンポーネント (ドロップダウンメニュー、モーダルダイアログなど) では、フォーカス管理を JavaScript で適切に実装し、フォーカストラップやフォーカスの復元を正しく処理する必要があります。UI デザイン実践の書籍も参考になります。

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