Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。アクセシビリティ向上のため積極的に使用を推奨。
セレクター Widely available

:focus-visible

:focus-visible はブラウザがフォーカスインジケーターを表示すべきと判断した場合にのみマッチする擬似クラス。キーボードナビゲーション時にはフォーカスリングを表示し、マウスクリック時には非表示にする、という使い分けが可能。

アクセシビリティフォーカス

概要

:focus-visible はブラウザがフォーカスインジケーターを表示すべきと判断した場合にのみマッチする擬似クラス。キーボードナビゲーション時にはフォーカスリングを表示し、マウスクリック時には非表示にする、という使い分けが可能。

対応ブラウザ

デスクトップ

Chrome 86+
Edge 86+
Safari 15.4+
Firefox 85+

モバイル

Chrome Android 86+
Safari iOS 15.4+
Firefox Android 85+

基本構文

CSS 
/* マウスクリック時のフォーカスリングを消す */
button:focus:not(:focus-visible) {
  outline: none;
}

/* キーボード操作時のみカスタムフォーカスリング */
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

実務での使いどころ

  • キーボードユーザー向けフォーカス表示

    キーボードナビゲーション時のみ目立つフォーカスリングを表示。

  • マウスユーザーのUX改善

    マウスクリック時の不要なフォーカスリングを非表示にしてデザインを保つ。

注意点

  • outline: none を :focus に直接使うとアクセシビリティを損なう。必ず :focus-visible と組み合わせる。
  • ブラウザのヒューリスティクスに依存するため、挙動が異なる場合がある。

アクセシビリティ

  • フォーカスインジケーターを完全に消さない。WCAG 2.4.7 に準拠するため :focus-visible でカスタムスタイルを提供する。
  • フォーカスリングのコントラスト比は 3:1 以上を確保する。

参考リンク