要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。
:focus-visible { ... }バリアント focus-visible: を先頭に付けて使います
| focus-visible:outline-2 | :focus-visible { outline-width: 2px } |
単なるfocus:より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も併用する。
AIは今でも「フォーカスの枠を消す」ためにoutline: noneを単独提案することがありますが、キーボード利用者への重大なアクセシビリティ破壊です。正解は:focus-visibleで「キーボード操作時だけ」表示する使い分け。マウスクリックでは出ず、Tab移動では出る、という理想の挙動がJSなしで手に入ります。
このoutline: noneだらけのCSSを:focus-visibleベースの安全なフォーカス管理に書き換えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。