focus-visibleでキーボード操作に優しいUIを作る方法｜CSSアクセシビリティ改善

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを操作する際、私たちはついマウスやタッチ操作に頼りがちですが、アクセシビリティを考慮すると 「キーボード操作だけで使いやすいか？」 は重要な指標になります。

特に、フォームやリンクの移動時に表示される フォーカスリング（青い枠線）。
これを単純に消してしまうと、キーボード操作ユーザーが迷子になる可能性があります。

そこで注目したいのが :focus-visible というCSS疑似クラス。

マウス操作時にはフォーカスリングを非表示にし、キーボード操作時だけフォーカスリングを表示するという、「いいとこ取り」なフォーカス管理ができるのです。

今回は、:focus-visible の基本と実装例、さらに実運用での注意点をわかりやすく解説します。

focusとfocus-visibleの違い

つまり、マウスでクリックしたときに不要なフォーカスリングを出さず、キーボードだけ可視化できるのです。

基本的な書き方

  button:focus-visible,
  a:focus-visible {
    outline: 3px solid #4caf50;
    outline-offset: 2px;
    border-radius: 4px;
  }

このCSSを設定すると、Tabキー移動時だけボタンやリンクにフォーカスリングが表示されます。

実装例：フォームとリンクで試す

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

Tabキーを押して移動すると、キーボード操作時のみフォーカスが表示されるのがわかります。

サポート状況とフォールバック

Chrome・Edge・Firefox は対応済み
Safari 15.4 以降でも利用可能

もし古いブラウザもカバーしたい場合は、focus-visible Polyfill を読み込むことで同等の挙動を再現できます。

実運用のポイント

まとめ

satokotadesignキャンペーン実施中！