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

:focus-visible

:focus-visible 擬似クラスは、要素が :focus 擬似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます。（多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します。）

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:focus-visible
86
86
85
15.4
86
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: :-moz-focusring (4)

基本構文

CSS 
/* Hide the focus ring on mouse click */
button:focus:not(:focus-visible) {
  outline: none;
}

/* Custom focus ring only during keyboard navigation */
button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

ライブデモ

ki-bo-dfocus

:focus-visible ki-bo-dfocus demo.

プレビュー全画面表示

Inputfield

:focus-visible Inputfield demo.

プレビュー全画面表示

link. Focus

:focus-visible link. Focus demo.

プレビュー全画面表示

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク