:focus-visible

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。

なお、 Firefox は似た機能をより古い接頭辞付きの疑似クラス、 :-moz-focusring で対応しています。

構文

:focus-visible

基本的な例

この例では、 :focus-visible セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 :focus でスタイル付けされた要素との動作の違いに注意してください。

<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;  
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

フォーカスインジケーターの選択的な表示

カスタムコントロール、例えば カスタム要素ボタンなどは、 :focus-visible を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは <button> のようなコントロールのネイティブのフォーカスの動作に一致します。

<custom-button tabindex="0" role="button">Click Me</custom-button>
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}

ポリフィル

focus-visible.js を使用して :focus-visible のポリフィルにすることができます。

アクセシビリティの考慮事項

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

仕様書

仕様書 状態 備考
Selectors Level 4
:focus-visible の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:focus-visible
実験的
Chrome 完全対応 67
無効
完全対応 67
無効
無効 From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 4
代替名
完全対応 4
代替名
代替名 非標準の名前 :-moz-focusring を使用しています。
IE 未対応 なしOpera 完全対応 54
無効
完全対応 54
無効
無効 From version 54: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 67
無効
完全対応 67
無効
無効 From version 67: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 4
代替名
完全対応 4
代替名
代替名 非標準の名前 :-moz-focusring を使用しています。
Opera Android 完全対応 48
無効
完全対応 48
無効
無効 From version 48: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報