フォーカスリングとは？outline:noneがダメな理由と:focus-visibleの使い方

マウスが使えない人や、キーボード操作のほうが速い人は、Tabキーでリンクやボタンを順番に移動してページを使います。このとき「いまどこにいるか」を教えてくれるのが、要素を囲むフォーカスの輪（フォーカスリング）です。

体験してみよう

まず、Tabキーでの操作を体験してみましょう。

オレンジの輪が「いまここ」を教えてくれます。EnterかSpaceで、その場所を押せます。

フォーカスの輪の正体は、CSSのoutlineです。既定の見た目が野暮ったいからと、こう消してしまうサイトがあります。

button:focus {
  outline: none;   /* ❌ 絶対にやらない */
}

見た目はすっきりしますが、キーボードの人はカーソルを失います。「消す」のではなく、次のように「きれいに描き直す」のが正解です。

button:focus-visible {
  outline: 3px solid #e5967a;
  outline-offset: 2px;
}

:focusではなく:focus-visibleを使うのがいまの定番。マウスでクリックしたときは輪が出ず、Tabで来たときだけ出る——両方の使い勝手が両立します。

フォーカスはHTMLに書いた順に移動します。見た目の並びと書いた順がずれていると、輪が画面上を飛び回って混乱のもと。レイアウトはCSSで動かしても、HTMLは読む順・操作する順に書く——この原則を守れば自然に正しくなります。