要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。
:focus-visible { ... }button:focus-visible { outline: 2px solid #3b82f6; }キーボードフォーカス時のみアウトラインを表示
.input:focus-visible { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }フォーム入力フィールドのキーボードフォーカス
アクセシビリティの向上に重要。:focusの代わりに使用することで、マウス操作時の不要なアウトラインを避けながら、キーボード操作時の視認性を確保。
:focusと同じと思い込む。マウスクリックでは適用されないことを理解する。古いブラウザでは動作しないため、フォールバックとして:focusも併用する。
Chrome 86+, Firefox 85+, Safari 15.4+