✏️

アクセシビリティの観点からみる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