:focus-visibleの擬似クラスについてご存知でしょうか？
恥ずかしながら私は最近知りました…。
アクセシビリティを意識するようになってから、キーボード操作によるフォーカスを考慮してスタイリングするようになったのをきっかけに知りました！
アクセシビリティを意識した実装について理解を深めたい方に届くと嬉しいです！
:focus-visibleとは何か
ウェブページ上の要素がフォーカスされたときに適用されるCSSの擬似クラスです。
ユーザーがキーボードを使っているときなど、フォーカスを視覚的に表示すべき場合にのみ適用されます。
W3Cのサイトだと下記の箇所に記載があります！
各ブラウザの対応状況は下記の通りです！
IE以外のブラウザであればおおよそ動作してくれそうです！
:focusではダメなのか？
:focus擬似クラスは、ホバー時以外にマウスでクリックしたときもフォーカスを表示していました。
見た目が良くないという理由でフォーカス表示を完全に削除した経験がある人もいるのではないでしょうか？
その結果、キーボード操作のユーザーにとって使いづらいサイトになってしまう問題がありました。
:focus-visibleの必要性（利点）
クリック時には表示されずキーボード操作時に確実にフォーカスが表示されるため、アクセシビリティが向上します。
:focus-visibleの使い方
使い方は他の擬似クラスと同様です！
.sample:focus-visible {
outline: 2px solid blue;
}
少し前までoutlineにはborder-radiusが適用されないためデザインしたフォーカスリングを実装する場合box-shadowを利用する方法で実装していたこともありました。
現在はoutlineにもborder-radiusが適用されるのでアクセシビリティを考慮するのであればbox-shadowよりも、:focus-visibleで実装する方が良いと思います！
やっぱり古いブラウザーに対応したい時
:focusを使った代替スタイルを用意することで解決します。
@supports not selector(:focus-visible) {
.sample:focus {
outline: 2px solid blue;
}
}
devツールでのデバッグ方法
ご存知の方も多いと思いますがブラウザでスタイルを調整する際のデバッグ方法も紹介しておきます！
- 要素を検証→対象の要素を選択
- スタイルタブを開き、フィルタ横にある「:hov」をクリック
- 状態のチェックボックスが表示されるので確認したい箇所にチェックを入れる
要素を検証→対象の要素を選択
「:hov」をクリック
適応されているCSSプロパティを確認する「スタイル」タブを選択します。
フィルターの横にある「:hov」を選択します
エミュレート
「:hov」をクリックすると要素の状態をエミュレートできる画面が開くので確認したい状態のところにチェックを入れてください。
【まとめ】擬似クラス:focusと:focus-visibleについて
これまでアクセシビリティをほとんど意識せずに実装してしまっていたことがわかりました…。
これまではスタイルを実現するためにアクセシビリティを犠牲にしてきた部分もあったと思いますが修正していけると良いですね！
アクセシビリティを考慮した実装ができるように努めて参ります。