アクセシビリティの観点からみるfocus-visibleの話
みなさん、こんにちは。
今回はCSSの擬似クラス「:focus」と「:focus-visible」について、アクセシビリティの観点も交えて一から解説します。
:focus と :focus-visible とは?
どちらも「今どこにフォーカスがあるか」を示すためのCSSの擬似クラスです。
まずは違いを簡単に説明します。
-
:focus
クリックやタブキーなど、どんな方法で要素にフォーカスが当たっても適用されます。 -
:focus-visible
「ユーザーが今どこにいるかを知る必要がある」とブラウザが判断した場合だけ適用されます。
(主にキーボード操作時や、キーボード入力が前提の要素(input, textarea, selectなど)にマウスでフォーカスした時)
サンプルコード
<form>
<label>Full Name: <input name="firstName" type="text" /></label>
</form>
label {
display: block;
}
input:focus {
background-color: blue;
}
input:focus-visible {
outline: 2px solid crimson;
}
-
input:focus
クリックでもキーボード操作でも、inputをフォーカスすると青い背景になります。 -
input:focus-visible
キーボード操作や「入力欄」へのクリック時だけ、赤いアウトラインが表示されます。
クリック時に:focus-visibleが適用されない要素もある
-
input(テキストボックス)、textarea、select
これらはクリック時にも:focus-visibleが適用され、アウトラインが出ます。
→ 入力欄は「今ここに入力できる」と明示する必要があるため -
button、a(リンク)、checkbox、radio、カスタムボタン(div[tabindex]など)
これらはマウスでクリックしても:focus-visibleは適用されません(アウトラインも出ません)。
→ ボタンやリンクは「ユーザーが自分で場所を選んで操作している」ので、インジケーターは不要と判断されるため
まとめ表
要素 | クリック時(:focus-visible) | キーボード操作時(:focus-visible) |
---|---|---|
input(text等) | 出る | 出る |
textarea | 出る | 出る |
select | 出る | 出る |
button | 出ない | 出る |
a(リンク) | 出ない | 出る |
checkbox/radio | 出ない | 出る |
div[tabindex] | 出ない | 出る |
なぜこの仕様なのか?
-
アクセシビリティの観点
キーボードユーザーや支援技術を使う人にとって、今どこにいるかが分からないと操作ができません。
逆に、マウス操作の場合は「自分で場所を選んでいる」ので、常にインジケーターを出す必要はありません。 -
デザイン性との両立
すべてのクリックでアウトラインが出ると見た目が煩雑になるため、必要な場面だけ表示する仕様になっています。
おまけ
- :focus-within
他にも:focus-withinというのもあり、こちらは小要素、孫要素がフォーカスされた時に親要素にもCSSが適用されるので面白いです。
まとめ
- :focus-visibleを使うことで、キーボードユーザーには確実にインジケーターを出しつつ、マウスユーザーには不要な時は非表示にできる。
- 古いブラウザ対応が必要な場合は、:focusとの併用も検討
Discussion