キーボードでリンクやボタンを移動しているとき、現在どの要素を操作しようとしているのかが見えなければ、目的の場所で止まることも選択することも難しくなります。そこで必要になるのが、フォーカスの可視化です。
この記事では、フォーカス表示の役割を整理したうえで、CSSによる基本実装、WCAG 2.2との関係、キーボードでの確認手順を解説します。
フォーカスの可視化とは
フォーカスとは、キーボード入力などの操作を受け取る要素が選ばれている状態です。Tabキーでリンクからボタンへ移動すると、フォーカスも次の要素へ移ります。
フォーカスインジケーターは、フォーカスのある要素を枠線や色の変化で示す視覚的な目印です。この目印があれば、利用者はページ内の現在位置と、Enterキーなどで次に操作する要素を把握できます。
キーボード操作とフォーカス表示の実務上の考え方もあわせて確認すると、ページ全体の操作設計を整理しやすくなります。
フォーカス表示が操作を支える人
フォーカス表示は、特定の利用者だけに必要な機能ではありません。次のような場面で操作を支えます。
- キーボードを主に使う人：運動機能上の理由などでマウス操作が難しい場合、現在位置を見ながら操作できます。
- 画面を拡大して使う人：表示範囲が狭くても、フォーカスが移った先を追いやすくなります。
- 一時的にマウスを使いにくい人：けがや機器の故障などで入力方法が限られたときにも役立ちます。
- キーボードで素早く移動したい人：フォーム入力や繰り返し作業で、操作位置を確かめながら進められます。
CSSによる基本実装
リンク、ボタン、入力欄など、フォーカスを受け取る要素に見やすい輪郭を設定します。次の例では、キーボード操作時にフォーカスを認識しやすいように、3pxの枠線と間隔を設けています。
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}:focus-visibleは、ブラウザが視覚的なフォーカス表示を必要と判断した場面にスタイルを適用する疑似クラスです。キーボードで移動したときには明確な目印を出しつつ、ポインター操作との見た目を調整したい場合に使えます。
ただし、例の青色をそのまま採用すれば、どのサイトでも十分に見えるわけではありません。実際の背景色、ボタンの色、ライト表示とダーク表示など、フォーカスが現れるすべての状態で確認します。色だけでなく、線の太さと要素からの間隔も見つけやすさに影響します。
:focusとの使い分け
:focusは、要素がフォーカスを受け取っている間は入力方法にかかわらず一致します。クリック後もフォーカス表示を残す設計なら、:focusで同じ輪郭を指定できます。
どちらを使う場合でも、キーボード操作時の目印を消さないことが前提です。ブラウザ標準の表示を変更しない選択肢もあります。独自のデザインに置き換えるなら、標準表示と同等以上に見つけやすいかを確かめます。
WCAG 2.2で確認する点
WCAG 2.2では、フォーカスが見えることと、その見た目が十分に判別できることを別の達成基準で扱います。「コントラスト比3:1」だけを覚えるのではなく、何と何のコントラストを評価するのかを区別する必要があります。
| 達成基準 | 適合レベル | 確認内容 |
|---|---|---|
| 2.4.7 フォーカスの可視化 | AA | キーボードフォーカスの位置を視覚的に確認できるか |
| 1.4.11 非テキストのコントラスト | AA | 制作者が設定したフォーカス表示と隣接色の間に、少なくとも3:1のコントラストがあるか |
| 2.4.13 フォーカスの外観 | AAA | 表示面積が2 CSS pxの外周と同等以上で、フォーカスの有無による変化に少なくとも3:1のコントラストがあるか |
2.4.13の詳しい考え方は、WCAG 2.2「2.4.13 フォーカスの外観」の解説で確認できます。
outline: noneを安易に使わない
フォーカス枠がデザインに合わないという理由だけで、outline: noneを指定すると、キーボード利用者が操作位置を見失うおそれがあります。標準の枠線を消すなら、同じ要素に明確な代替表示を用意します。
背景色だけを薄く変える方法は、周囲の色や画面の見え方によって変化が伝わりにくくなります。輪郭、背景、文字色などを組み合わせる場合も、フォーカスのある状態を単独で見て判別できるかを確認してください。離れた要素同士を見比べなければ気付けない変化は、操作中の目印として十分ではありません。
キーボードによる確認手順
フォーカス表示は、CSSを見ただけでは評価できません。実際のページをキーボードで移動し、表示と移動順序を確かめます。
- ページの先頭でTabキーを押し、最初に操作できる要素へ移動します。
- Tabキーで順方向、ShiftキーとTabキーで逆方向に移動します。
- リンク、ボタン、入力欄など、すべての操作対象でフォーカス表示が見えるか確認します。
- 表示が背景や部品の境界に埋もれず、画面端やほかの要素に隠れていないか確認します。
- 移動順序が画面の読み順や操作の流れと一致しているか確認します。
- レスポンシブ表示や配色が変わる画面でも、同じ手順を繰り返します。
自動検査は問題の候補を見つける補助になりますが、利用者がフォーカスを目で追えるか、移動順序が自然かという判断は手動確認が必要です。検査方法を選ぶ際は、Webアクセシビリティチェックツールの使い分けも参考になります。
実装時のチェックリスト
- フォーカスを受け取るすべての要素に、見える目印がある
- 標準の
outlineを、代替表示なしで消していない - フォーカス表示が隣接する背景や部品に埋もれない
- TabキーとShiftキー、Tabキーの両方向で位置を追える
- フォーカスの移動順序が、内容と操作の流れに合っている
- 画面幅や配色が変わっても、表示が隠れたり見えにくくなったりしない
フォーカスを見える状態に保つ
フォーカスの可視化は、キーボード利用者が現在位置を知るための基本的な手掛かりです。まずブラウザ標準の表示を残し、独自スタイルが必要なら、見やすい輪郭と十分なコントラストを用意します。そのうえで、実際のページをTabキーで移動し、すべての操作対象を見失わずにたどれることを確認してください。
Webアクセシビリティ対応を進めたい方へ
当社では、Webアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。サイトのアクセシビリティ改善に取り組みたい方は、サービスの詳細をご覧ください。