代替なしで消さない
outline: noneだけでは、キーボードの現在地が分からなくなります。
WEB ACCESSIBILITY · KEYBOARD FOCUS
:focus-visible Focus Ring Lab
キーボードの現在地を消さず、マウスとTabで違いを確かめてみる。
LIVE FOCUS COMPARISON
同じ要素を、マウスとTabで操作する
FOCUS-VISIBLEVISIBLE
DESIGN SYSTEM · 2026
Build interfaces
that stay findable.
Systems 02 / INTERFACESoft
Signal
READY
「Tab練習を開始」を押して、キーボードの現在地を確認してください。
PRACTICAL FOCUS RULES
消すのではなく、見える形を設計する
Tab操作で確実に見せる
:focus-visibleで、フォーカス表示が必要な場面をブラウザの判断に任せます。
背景が変わっても見せる
明暗が混在する画面では、2色リングにすると境界を保ちやすくなります。
実際にTabでたどる
表示だけでなく、順番、隠れ、スクロール後の見失いもキーボードで確認します。