WebページでTabキーを押したとき、リンクやボタンの周囲に枠線が現れることがあります。これは、キーボードからの操作を現在受け付ける要素を示す「フォーカス表示」です。
フォーカスが見えなければ、利用者は自分がページ内のどこにいて、次に何を操作できるのか判断しにくくなります。JIS X 8341-3を意識してWebサイトを整えるうえでは、表示の目立ちやすさだけでなく、キーボードで要素へ移動できることや、移動順が自然であることも一緒に確認する必要があります。
「フォーカス」と「フォーカス表示」の違い
フォーカスとは、リンクやボタンなどがキーボード操作の対象として選ばれている状態です。一方、フォーカス表示は、その状態を枠線や背景色の変化などで視覚的に伝える手掛かりを指します。
この二つを分けて考えることが大切です。枠線が見えていても目的の要素へ移動できなければ操作できません。反対に、内部ではフォーカスが移動していても表示が見えなければ、画面を見ながらキーボードを使う人は現在位置を把握できません。
フォーカス表示が必要な理由
フォーカスは、マウスを使わずにページを移動する人にとって、現在位置を示す案内標識のような役割を持ちます。とくに次のような場面で重要です。
- キーボードを中心に操作する場合：次に実行されるリンクやボタンを、画面上で確認できます。
- 運動機能に制限がある場合：細かなポインター操作に頼らず、順番に操作対象を移動できます。
- 視覚に制限がある場合：支援技術を利用するとき、現在の操作対象を把握する手掛かりになります。
- 操作に不慣れな場合：どこを操作しているのかが明確になり、迷いを減らせます。
確認したい4つのポイント
フォーカス対応は、枠線を付けるだけでは完了しません。見え方、移動の可否、順序、継続性の四つに分けると確認しやすくなります。
| 確認する点 | 困りやすい状態 | 改善の考え方 |
|---|---|---|
| 見え方 | どの要素が選ばれているか分からない | 枠線や背景色の変化をはっきり示す |
| 移動の可否 | リンクやボタンにキーボードで到達できない | 操作対象へ順番に移動できるか確かめる |
| 移動順 | 表示の流れと関係なくフォーカスが飛ぶ | 画面の内容と利用者の予想に沿う順序にする |
| 継続性 | 途中でフォーカスが見えなくなる | すべての操作対象で表示が保たれるか確かめる |
1．現在位置がひと目で分かるか
リンクやボタンにフォーカスが移ったとき、周囲の枠線、背景色、文字の見え方などを変え、ほかの要素と区別できるようにします。変化が小さすぎると、表示があっても利用者には伝わりません。
色を選ぶときは、赤と緑のように見分けにくい場合がある組み合わせだけに頼らず、周囲との明るさの違いや枠線の形も含めて確認します。
2．キーボードで必要な要素へ移動できるか
Tabキーを押しながらページを進み、リンクやボタンなどの操作対象へ順番に移動できるかを確認します。見た目だけを整えても、必要な要素へ到達できなければ、キーボードで操作を完了できません。
3．移動順が内容の流れに合っているか
フォーカスの移動順は、画面に表示される情報の流れや、利用者が予想する操作手順に沿っていることが重要です。ページ上部から下部へ読んでいる途中で離れた場所へ移動すると、現在位置や前後関係を見失いやすくなります。
4．途中で表示が消えないか
ページの一部だけにフォーカス表示が設定されていると、移動の途中で現在位置が分からなくなります。主要なリンクやボタンだけでなく、ページ内のすべての操作対象を通して確認します。
CSSでフォーカス表示を付ける基本例
元のデザインとの違いが分かるように、枠線と背景色を組み合わせる例を示します。
button:focus,
a:focus {
outline: 2px solid #007acc;
background-color: #e0f7ff;
}
この例では、ボタンまたはリンクにフォーカスが移ると、青い枠線と明るい背景色が表示されます。色はあくまで一例です。実際のページでは、通常時の背景、文字色、周囲の要素との違いを見ながら調整してください。
枠線や背景色を変更した後は、文字が読みにくくなっていないか、要素の大きさや配置が変わっていないかも確認します。フォーカス表示を目立たせることと、コンテンツを読みやすく保つことの両方が必要です。
公開前にできるキーボード確認
特別なツールがなくても、基本的な動作は次の手順で確かめられます。
- ページの先頭からTabキーを繰り返し押します。
- フォーカスが移るたびに、現在位置が明確に見えるか確認します。
- リンクやボタンへ、内容の流れに沿った順序で移動するか確認します。
- 途中でフォーカス表示が消えたり、移動できなくなったりしないか確認します。
- 枠線や背景色の変化によって、文字やレイアウトが見づらくなっていないか確認します。
表示と操作を分けず、一連の動きとして確認するのがポイントです。より広い実務上の確認項目は、キーボード操作とフォーカス表示を整える実務解説でも紹介しています。
まとめ
フォーカスはキーボード操作の対象となっている状態であり、フォーカス表示はその現在位置を目で確認するための手掛かりです。分かりやすい枠線を付けるだけでなく、必要な要素へ移動できるか、順序が自然か、途中で表示が消えないかまで確認してください。
まずは実際のページをTabキーでたどり、利用者の視点で操作の流れを確かめることが、改善点を見つける第一歩になります。
Webアクセシビリティ対応を進めたい方へ
当社では、Webアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。詳しい機能や導入方法は、サービスページでご確認ください。