フォーカスインジケータの視認性向上：CSS実装のポイント

こんにちは。フロントエンドエンジニアの shoko です。
昨年から野球観戦にハマり、毎日の楽しみとなっています⚾️

今回は、キーボード操作時にどの要素がフォーカスされているかをユーザーに明確に伝えるために行ったフォーカスインジケータ改善の試行錯誤をご紹介します。

フォーカスが見えない問題
初期対応：CSSでフォーカスを見える化
新たな課題：背景に埋もれるフォーカス
最終改善：2色構成で視認性UP
- WCAG解説書・達成方法集からヒントを得る
- 2色構成のフォーカスインジケータ
デフォルトのフォーカスインジケータを使わなかった理由
おわりに

フォーカスが見えない問題

Tabキーなどを利用しキーボード操作でフォームやボタンを移動するとき、通常はフォーカスが当たった要素に枠線やハイライトが表示されます。しかし、「テックタッチ」の一部のコンポーネントでは、フォーカスが当たってもスタイルが変わらず、画面上でどの要素が選択されているのか視覚的に分からない状態でした。

このままだと、マウスを使わずキーボードだけで操作するユーザーは、フォーカスがどこにあるのか分からなくなり、操作に詰まってしまいます。

「ガイドを停止」ボタンのイメージ。左：通常時、右：フォーカスが当たっている時 — 通常時とフォーカスが当たっている時の変化がない

初期対応：CSSでフォーカスを見える化

まずは CSS の outline を使って、フォーカスされた要素に枠線を追加しました。　　スタイルは既存のコンポーネントで使っていたものを流用しています。

button:focus-visible {
  outline: 2px solid #075BB7;
}

これで基本的なフォーカス可視化は達成でき、キーボード操作でもフォーカス位置が分かるようになりました🎉

新たな課題：背景に埋もれるフォーカス

これで一安心…と思いきや、新たな問題が⚡️

フォーカスインジケータとして追加した青い枠線は、全ての場面で十分に目立つわけではないことが分かりました。

具体的には以下のようなケースで視認性が低下します。

例１：コンポーネントの背景色とフォーカスインジケータが同系色の場合

→ 青い枠線がボタンの色に埋もれてしまい、どこにフォーカスがあるのか分かりにくい

例２：コンポーネントの外側の背景色とフォーカスインジケータが同系色の場合（1つめの白背景ボタン）

「ガイド再生中」ツールバー — 1つめの白背景ボタンにフォーカスがあたり、青い枠線がついている

→ フォーカスインジケータが背景と同系色になり、ほとんど見えなくなる

その結果、フォーカスが見えにくい場面があり、キーボード操作ユーザーにはどこを操作しているのか分かりづらい状態が残っていました。

最終改善：2色構成で視認性UP

WCAG解説書・達成方法集からヒントを得る

フォームやボタンなど、それぞれのコンポーネントに対して個別にフォーカススタイルを設定することもできます。
ただ、この方法だとコンポーネントが増えるたびに管理が煩雑になり、すべてのケースで一貫した視認性を保つのは難しくなります。

「あらゆるコンポーネントに適用できる、視認性に優れたフォーカスインジケータを設定する方法はないだろうか？」

そう考え、WebアクセシビリティのガイドラインであるWCAGの解説書「WCAG2.1 解説書 - 達成基準 2.4.7: フォーカスの可視化を理解する」を改めて見直しました。
この解説書には「十分な達成方法」として6つの実装例が掲載されています。
その中で、まさに自分が直面していた課題を解決できそうな方法を発見しました👀

C40: すべてのコンポーネントで十分なコントラスト比を確保するために2色のフォーカスインジケータを作成する

この方法では、1色のフォーカスインジケータに加えて、外側にもう1色（白など）を追加します。これにより、背景色の影響を受けにくくなります。

この例を参考に、実際に実装してみました。

2色構成のフォーカスインジケータ

outline と box-shadow の組み合わせで、背景色に左右されず視認性の高いスタイルを実現。

button:focus-visible {
  outline: 2px solid #075BB7; /* 内側の青い枠線 */
  box-shadow: 0 0 0 5px #FFFFFF; /* 外側に白い枠線 */
}

2色構成により、背景色とフォーカスインジケータが同系色になるケース（例2）は解消されました🙌

しかし、コンポーネント自体の背景色と枠線が似ている場合（例1）では、依然としてフォーカスインジケータが見えづらい状態が残ります。
この課題を解決するため、outline-offset でフォーカスインジケータを要素から少し外側にずらしました。

button:focus-visible {
  outline: 2px solid #075BB7; /* 内側の青い枠線 */
  outline-offset: 1px; /* 内側の枠線を1px外側にずらす */
  box-shadow: 0 0 0 5px #FFFFFF; /* 外側に白い枠線 */
}