フォーカス

定義

フォーカスとは、いま操作対象になっている要素がキーボード入力を受け取っている、という状態を 目に見えるかたちで示すものです。マウスを使わず Tab キーだけで画面を移動していくと、要素の まわりにくっきりとした枠、いわゆるフォーカスリングが現れて、今自分がどこにいるのかを教えて くれます。ここで Enter や Space を押せばその要素が実行され、もう一度 Tab を押せば次の 位置へ移ります。マウスユーザーにとってのカーソルと同じように、フォーカスリングはキーボード ユーザーにとって欠かせない方位磁石の役割を果たします。ボタン、リンク、入力欄のように操作 できる要素であれば、どれもこのフォーカスを受け取れる状態でなければなりません。

なぜ重要か

すべての人がマウスを使うわけではありません。手が不自由な人、スクリーンリーダーを併用する人、 そして単にキーボードのほうが速い開発者まで、多くの人が Tab キーで画面を操作します。こうした 人たちにとってフォーカス表示がないと、今カーソルがどのボタンにあるのかまったくわからず、 目を閉じたまま部屋のなかを手探りするのと変わりません。だからフォーカスリングは好みの問題では なく、アクセシビリティの基本要件です。はっきりしたフォーカス表示があれば、キーボードユーザーは 迷わず目的の場所まで正確にたどり着けますし、フォームのように順番が大切な画面でも、今どの欄を 埋めているのかがひと目でわかります。整ったフォーカスは、より多くの人がこの画面を実際に使える ようにするための入り口です。アクセシビリティは一部の人だけへの配慮ではなく、状況によっては 誰もがキーボードに頼る瞬間のための土台だと覚えておくとよいでしょう。マウスが急に反応しない ときや、長いフォームを手早く埋めたいときなど、結局は私たち全員が一時的にキーボードユーザーに なるからです。

よくある間違い

• 見た目が気になるという理由で outline を消してしまい、代わりの表示を何も用意しないことです。 こうするとキーボードユーザーはカーソルの位置がわからず、画面のなかで完全に迷子になります。 アクセシビリティを最も大きく損なう、ありがちな失敗です。
• フォーカスリングのコントラストが弱すぎることです。背景とほとんど区別がつかない薄い枠は あってもなくても同じで、明るい環境では実質的に見えなくなってしまいます。
• マウスでクリックしたときまでフォーカスリングが大きく残り、画面がごちゃついて見えることです。 これを消そうとしてリングそのものを取り去り、キーボードユーザーまで巻き添えにしてしまう ケースが少なくありません。

実務のヒント

• outline を消したいときは、必ず別のはっきりした表示で置き換えてください。ただ消すだけでは キーボードユーザーが迷子になるので、枠線や影といった代わりの手がかりをあわせて用意するのが 原則です。
• マウスクリックではリングを隠し、キーボード移動のときだけリングを見せたいなら focus-visible を 活用してください。この二つの状況を分けてあげると、画面はすっきりしつつアクセシビリティは そのまま保てます。
• フォーカスリングは背景とのコントラストが十分になるよう、色と太さを決めてください。どんな 背景の上でもひと目で見つかってこそ、表示として本来の役目を果たせます。

関連概念