:focus-visibleについて

INDEX

こんにちはミズノです。

2021年からモダンなブラウザのUA style sheet(ユーザーエージェントスタイルシート)に:focus-visibleが使用されるようになってきました。ChromeのUA style sheetを見ると全ての:focus:focus-visibleになっています!

今回は:focus-visible擬似クラスの紹介をしていこうと思います。

:focus-visibleとは

  • キーボード操作時にフォーカスされた要素のスタイルを指定することができる
  • キーボード入力をサポートする要素はマウス操作時でもフォーカスが表示される(input要素、またはフォーカスが当たると仮想キーボードが表示されるような要素など)

:focus-visibleが実装された経緯は開発者がマウスユーザーのためにoutline:0を指定してフォーカスリング(フォーカスインジケータ)を消し、キーボードユーザーがサイトにアクセスできなくなることを防ぐために設計、実装されたようです。

使い方

/* マウス操作時 */
.example:focus {
  outline: 1px solid #fdfe00;
}

/* キーボード操作時 */
.example:focus-visible {
  outline: 1px solid #46e678;
}

input要素とbutton要素に:focus:focus-visibleを使用した場合のマウス操作時とキーボード操作時の比較。


ブラウザの対応状況

2022年1月26日現在のブラウザの対応状況(Can I use)ではChrome、Firefox、Edgeなどが対応されていますが、Safariが未対応となっています。

しかし、今月の20日に公開されたRelease Notes for Safari Technology Preview 138によるとSafari Technology Previewで:focus-visibleが使用可能になったのでSafariのサポートも間近だと思われます!

公式のPolyfillも用意されているので未対応のブラウザを対応したいときはこちらで対応しましょう。

focus-visible.js

おわりに

「この青い線の見た目変えられませんか?」と依頼されたときは、:focusより:focus-visibleで対応しましょう!

以上、:focus-visibleの紹介でした。

参考サイト

2021年1月〜3月に各ブラウザでfocus-visible周りの動きがあったのでまとめた

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

https://drafts.csswg.org/selectors/#the-focus-visible-pseudo

Chrome Platform Status(focus-visible in the default UA style sheet)

Chrome UA style sheet

https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html

PREV

BLOG一覧

NEXT

最新記事 Latest