:focusと:focus-visbleについて

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー 未分類

どうも、くまだです。

疑似クラスの:focusと:focus-visbleについて。

:focusと:focus-visble

:focusと:focus-visbleはCSSの疑似クラスです。

:focusはinputのようなフォーカスを持つ要素で、ユーザーが要素をクリックしたりタップしたり、Tabキーで選択したときに反応します。

:focus-visbleは、Tabキーで選択したときに反応します。


  <div>
    <label>focus</label>
    <input type="text" class="input-focus">
  </div>
  <div>
    <label>focus-visible</label>
    <input type="text" class="input-focusVisble">
  </div>

  <button class="focusButton">focusボタン</button>
  <button class="focusVisbleButton">focus-visbleボタン</button>

/* いったんリセット */
input:focus-visible, input:focus,button:focus-visible, button:focus {
  outline: initial;
}

input {
  border: 1px solid #000;

}


.input-focus:focus {
  outline: 3px solid blue;
  border-radius: 3px;
}

.input-focusVisble:focus-visible {
  outline: 3px solid red;
  border-radius: 3px;
}

.focusButton:focus {
  outline: 3px solid blue;
  border-radius: 3px;
}

.focusVisbleButton:focus-visible {
  outline: 3px solid red;
  border-radius: 3px;
}

See the Pen focusとfocus-visble by kuma0605 (@kuma0605) on CodePen.

フォームに関しては違いがほとんど分からないですが、ボタンに関してはfocusVisbleボタンはクリックしても反応しません。

ただし、focusVisbleボタンもTabキーで選択すると反応します。

マウスでの操作では、フォーカスリングが不要でもキーボード操作時には必要になることもあります。

アクセシビリティの観点上（マウスが使えないユーザーのためにも）、こういったスタイルを当てることも考慮しなければなりません。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧