:focus-visibleでキーボード操作のフォーカスを表示しよう

このレッスンでは、:focus-visibleを使ったキーボード操作向けのフォーカス表示を学び、アクセシビリティに配慮したデザインを実現できるようになることを目標にします。「CSS focus-visible 使い方」で調べている方向けです。

:focus-visibleは、キーボードのTabキーで要素を選んだときだけ目立つ枠を表示する疑似クラスです。マウスでクリックしたときは表示しないので、見た目を保ちつつキーボード操作の人に配慮できます。

サンプルコードでは、button:focus-visibleに紫色のoutlineを指定しています。マウスでクリックした場合と、Tabキーで選択した場合とで、枠線の表示のされ方が異なる様子を実際に試して比較してみましょう。

初心者がよくつまずくのが、:focusと:focus-visibleの違いです。:focusはマウスクリックでも常に発動しますが、:focus-visibleはブラウザがキーボード操作だと判断した場合にだけ発動する、より新しく賢い疑似クラスです。

マウスを使わずキーボードだけでサイトを操作する人にとって、「今どこを選択しているか」が分かるフォーカス表示は必須です。デザイン性とアクセシビリティを両立できる、比較的新しい便利な疑似クラスです。