:focus-visible擬似クラスを調べてみた
はじめに
cssには、:focus-visible擬似クラスが存在する。このクラスは主にブラウザがフォーカスを明示する必要があると判断した時に適応されるものです。
使うメリット
ユーザーの入力（マウスかキーボード）によってフォーカスの表示を変えたりすることができます。
例えば、input要素はtabキーで移動した場合に今いる場所に対して、ブラウザが規定のスタイルを当ててくれるため、デフォルトで青色の輪郭線が表示されます↓
:focus-visibleの擬似クラスを使用すると↓
input:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}
このようにフォーカスが当たった時のスタイルを自由に変更することができます。例えば青色の輪郭線を別の色にしてほしい、枠の角丸を無くしてほしい、といったニーズが出てきた時に:focus-visibleの擬似クラスを使用すると便利です。
:focus と :focus-visible の違い
大きな違いとしては、ボタン要素に対してマウスを使用してクリックした時に反応するか、反応しないかの違いです。
:focus
例: ボタン要素に対して、:focusを使用して輪郭線のスタイルを指定するとキーボード操作で意図したフォーカスリングが当たるようになります。ですが、キーボード操作に加えて、ボタンをクリックした時にも輪郭線が付与されるようになります。
:focus-visible
例: ボタン要素に対して、:focusを使用して輪郭線のスタイルを指定するとキーボード操作で意図したフォーカスリングが当たるようになります。ボタンをクリックした時は輪郭線は付与されません。
一般的に、マウスやポインティングデバイスを使っているユーザーに対しては対象要素の注意を留めておく必要がないことからフォーカスが不要と判断されることが多いです。よってクリックした時には輪郭線を付与しないでtabキーを使用した時のみ、フォーカスをつけたいといったケースが出てきます。
なぜ:focus-visibleを使用する必要があったのか
リセットCSSでbuttonタグに対して下記のスタイルが付与されていたため😢
button {
outline: none; // 輪郭線を削除するスタイル
}
元々、ブラウザのスタイルを打ち消すためのリセットCSSが存在していました。このスタイルの指定によりマウスやキーボード操作した時にフォーカスリングが付与されないようになっていました。
上で述べたようにマウスでの操作時にフォーカスリングは不要だがキーボード操作時には必要なため、:foucus-visibleを使用しました。
ボタンにclaasを付与して、下記のような感じで指定しました↓
（buttonタグを使用しているclass名）:focus-visible {
outline: 4px dashed darkorange;
}
このように指定してあげることでtabでのキーボード操作時にのみ指定のスタイルでフォーカスリングが当たるようになりました。
対応ブラウザ
現在、全ての主要ブラウザでサポートがされています。もし非サポートのブラウザ（IE等）に対して使いたい場合はpolyfillを導入する必要があります。
おわりに
画面を見ることができないユーザーに対してキーボード操作をメインとする支援技術を用いてWebを操作しているユーザーにはフォーカスがないとアクセシブルでなくなってしまう。よってtabキーなどのキーボードを操作時にはフォーカスを表示してあげることが大事です。今回、:focus-visible擬似クラスとアクセシビリティに対しての理解が少し進んだので良かったです。
参考
Discussion