§18-02Accessibility

Visible focus ring

キーボード操作中の要素を枠で目立たせる。

キーボードで操作している人が、今どこにいるかを見失わないようにする。マウスを使わない利用者には必須で、全ての操作可能な要素に適用する。

実装のポイント

:focus-visible を使うとマウスクリックでは出さずキーボード操作時だけリングを出せる。outline を消すなら必ず代替のリングを付け、背景とのコントラスト 3:1 を確保する。