マウスが使えない人や、キーボード操作のほうが速い人は、Tabキーでリンクやボタンを順番に移動してページを使います。このとき「いまどこにいるか」を教えてくれるのが、要素を囲むフォーカスの輪（フォーカスリング）です。
体験してみよう
まず、Tabキーでの操作を体験してみましょう。
やってはいけない：outline: none
フォーカスの輪の正体は、CSSのoutlineです。既定の見た目が野暮ったいからと、こう消してしまうサイトがあります。
button:focus {
outline: none; /* ❌ 絶対にやらない */
}見た目はすっきりしますが、キーボードの人はカーソルを失います。「消す」のではなく、次のように「きれいに描き直す」のが正解です。
べんりワザリセットCSSはどれを使う？リセットCSSって何？という人はこちら正解：focus-visibleで描き直す
button:focus-visible {
outline: 3px solid #e5967a;
outline-offset: 2px;
}| 部分 | 意味 |
|---|---|
:focus-visible | キーボード操作のときだけ輪を出すセレクタ |
outline: 3px solid … | 輪の太さ・種類・色（ブランドカラーでOK） |
outline-offset: 2px | 要素と輪の間にすきまを空けて見やすく |
:focusではなく:focus-visibleを使うのがいまの定番。マウスでクリックしたときは輪が出ず、Tabで来たときだけ出る——両方の使い勝手が両立します。
そもそもTabで届くのは「押せるタグ」だけ
Tabキーで止まってくれるのは、<a>・<button>・<input>のようなもともと押せるタグだけです。<div>や<span>にクリックの動きをつけて（JavaScriptで）ボタンのように見せても、Tabでは素通り——キーボードの人には存在しないのと同じになります。
<div onclick="send()">送信</div> <!-- ❌ Tabで届かない -->
<button onclick="send()">送信</button> <!-- ○ Tabで止まり、Enterでも押せる -->buttonにしか止まりません。divは押せる見た目でも、キーボードでは素通りされてしまいます。押せるものは押せるタグで作る。HTMLコースで学んだ「意味のとおりに書く」が、キーボード操作の土台にもなっています。
HTMLボタンと入力欄buttonタグの基本はこの回Tabの順番はHTMLの順番
フォーカスはHTMLに書いた順に移動します。見た目の並びと書いた順がずれていると、輪が画面上を飛び回って混乱のもと。レイアウトはCSSで動かしても、HTMLは読む順・操作する順に書く——この原則を守れば自然に正しくなります。
このレッスンのまとめ
- フォーカスの輪はキーボードの人のカーソル。
outline: noneで消さない - 消すかわりに
:focus-visible＋outlineできれいに描き直す - Tabの移動順＝HTMLの順。読む順に書くのが土台