【実務・中級編】インライン要素のフォーカス管理とアウトライン制御 – HTML実践ガイド

これはブラウザの「優しさ」であり、視覚障害を持つ方や、トラックパッドを使わずにキーボード操作を主とするパワーユーザーにとっての命綱です。

もしあなたが `outline: none` を指定して、代わりのフォーカススタイルを実装し忘れたら、そのページはキーボードユーザーにとって「どこをクリックしているか分からない迷路」と化します。これは WCAG（Web Content Accessibility Guidelines）の達成基準にも抵触する、プロとして避けるべき実装です。

—

実践的ベストプラクティス： `:focus-visible` の活用

モダンブラウザでは、`:focus` ではなく `:focus-visible` を使うのが今のスタンダードです。

この擬似クラスの賢いところは、「ユーザーがキーボードで操作しているときだけスタイルを適用する」という判定をブラウザ側で自動で行ってくれる点です。マウスでクリックしたときにはフォーカスリングを出さず、Tabキーで移動したときだけ出す――この「ちょうどいい塩梅」が、今のフロントエンド開発における最適解です。

コピペして使える、堅牢なフォーカスデザイン例

単に枠線を出すだけでなく、要素の背景色や装飾を活かしつつ、視認性を担保するスタイル例です。

/ インラインリンクのデフォルトスタイル /
.link {
color: #007bff;
text-decoration: underline;
/ アウトラインを完全に消すのではなく、カスタムプロパティで制御する準備をする /
outline: none;
transition: outline 0.2s ease;
}

/ キーボード操作時のフォーカスのみに適用 /
.link:focus-visible {
/ 視認性を確保しつつ、デザインに馴染ませる /
outline: 2px solid #0056b3;
outline-offset: 4px; / 要素と枠線の間に隙間を空けると非常に見やすい /
border-radius: 2px;
}

/ マウス操作時の挙動はそのまま（フォーカスリングが出ない） /
.link:focus:not(:focus-visible) {
outline: none;
}

—

「見えない」ことは「存在しない」ことと同義