状態
フォーカス
Focus
フォーカスとは、いま操作対象の要素がキーボード入力を受け取っていることを、目に見えるかたちで示す状態です。
定義
フォーカスとは、いま操作対象になっている要素がキーボード入力を受け取っている、という状態を 目に見えるかたちで示すものです。マウスを使わず Tab キーだけで画面を移動していくと、要素の まわりにくっきりとした枠、いわゆるフォーカスリングが現れて、今自分がどこにいるのかを教えて くれます。ここで Enter や Space を押せばその要素が実行され、もう一度 Tab を押せば次の 位置へ移ります。マウスユーザーにとってのカーソルと同じように、フォーカスリングはキーボード ユーザーにとって欠かせない方位磁石の役割を果たします。ボタン、リンク、入力欄のように操作 できる要素であれば、どれもこのフォーカスを受け取れる状態でなければなりません。
なぜ重要か
すべての人がマウスを使うわけではありません。手が不自由な人、スクリーンリーダーを併用する人、 そして単にキーボードのほうが速い開発者まで、多くの人が Tab キーで画面を操作します。こうした 人たちにとってフォーカス表示がないと、今カーソルがどのボタンにあるのかまったくわからず、 目を閉じたまま部屋のなかを手探りするのと変わりません。だからフォーカスリングは好みの問題では なく、アクセシビリティの基本要件です。はっきりしたフォーカス表示があれば、キーボードユーザーは 迷わず目的の場所まで正確にたどり着けますし、フォームのように順番が大切な画面でも、今どの欄を 埋めているのかがひと目でわかります。整ったフォーカスは、より多くの人がこの画面を実際に使える ようにするための入り口です。アクセシビリティは一部の人だけへの配慮ではなく、状況によっては 誰もがキーボードに頼る瞬間のための土台だと覚えておくとよいでしょう。マウスが急に反応しない ときや、長いフォームを手早く埋めたいときなど、結局は私たち全員が一時的にキーボードユーザーに なるからです。
よくある間違い
- 見た目が気になるという理由で outline を消してしまい、代わりの表示を何も用意しないことです。 こうするとキーボードユーザーはカーソルの位置がわからず、画面のなかで完全に迷子になります。 アクセシビリティを最も大きく損なう、ありがちな失敗です。
- フォーカスリングのコントラストが弱すぎることです。背景とほとんど区別がつかない薄い枠は あってもなくても同じで、明るい環境では実質的に見えなくなってしまいます。
- マウスでクリックしたときまでフォーカスリングが大きく残り、画面がごちゃついて見えることです。 これを消そうとしてリングそのものを取り去り、キーボードユーザーまで巻き添えにしてしまう ケースが少なくありません。
実務のヒント
- outline を消したいときは、必ず別のはっきりした表示で置き換えてください。ただ消すだけでは キーボードユーザーが迷子になるので、枠線や影といった代わりの手がかりをあわせて用意するのが 原則です。
- マウスクリックではリングを隠し、キーボード移動のときだけリングを見せたいなら focus-visible を 活用してください。この二つの状況を分けてあげると、画面はすっきりしつつアクセシビリティは そのまま保てます。
- フォーカスリングは背景とのコントラストが十分になるよう、色と太さを決めてください。どんな 背景の上でもひと目で見つかってこそ、表示として本来の役目を果たせます。