【入門編】インライン要素のフォーカス管理とoutline制御 – HTML実践ガイド

今回は、そんな彼らがキーボード操作されたときに現れる、あの「点線や枠線（outline）」についてお話しします。「デザインを邪魔するから消しちゃえ！」なんて思っていませんか？実はそれ、Webの世界ではちょっとした「落とし穴」なんです。

アクセシビリティを保ちつつ、どうやってオシャレに制御するか。その秘密を紐解いていきましょう。

—

なぜ「outline」は消してはいけないの？

まずは想像してみてください。あなたが大きなお店で買い物をしているとします。でも、その店には明かりがほとんどなく、どこに商品があるのか、自分が今どの棚の前に立っているのかさえ分かりません。

Webにおける「フォーカス（outline）」は、まさに「今、あなたがどこに注目しているかを教えてくれる大事な明かり」なんです。

マウスを使わずキーボードの「Tabキー」でページを移動する人にとって、この枠線が消えてしまうと、「今どこを選択しているのか」が全く分からなくなってしまいます。これは、視覚に頼らずWebサイトを使う方々にとって、非常に困る状態ですよね。

だからこそ、「デフォルトの枠線がデザインに合わないなら、もっと素敵な枠線に描き換えればいい」という考え方が、プロの現場では常識なんです。

—

「消す」のではなく「育てる」CSS

まずは、一番やってはいけない「ご法度」から。

/ 絶対にマネしないでください！ /
a:focus {
outline: none; / これをやると、キーボード操作の道しるべが消滅します /
}

これではなく、以下のように「本来あるべき場所に、別のスタイルをあてがう」のが正解です。

/ 推奨：フォーカスされたときに、より強調するスタイルを適用 /
a:focus {
/ デフォルトの枠線を消すなら、必ず代わりのものをセットする /
outline: none;

/ 代わりに背景色や下線で「ここにいますよ！」と主張させる /
background-color: #ffe066;
color: #333;
text-decoration: underline;
border-radius: 4px;
}

こうすることで、キーボードで操作しているユーザーにも、マウスを使っているユーザーにも、優しく分かりやすいページになります。

—

JavaScriptでさらなる「おもてなし」を

もし、「マウスでクリックした時は枠線を出したくないけど、キーボードの時は出したい」というワガママな（でも大切な）要望があるなら、JavaScriptの出番です。

これは「フォーカスリング制御」と呼ばれるテクニックで、最近のWeb開発ではよく使われます。

// ページ全体を監視して、キーボード操作かどうかを判定する小技です
window.addEventListener(‘keydown’, (e) => {
// Tabキーが押されたら、bodyにクラスを付与する
if (e.key === ‘Tab’) {
document.body.classList.add(‘is-keyboard-user’);
}
});

// マウスが触れたら、クラスを外して元の状態に戻す
window.addEventListener(‘mousedown’, () => {
document.body.classList.remove(‘is-keyboard-user’);
});

そしてCSS側でこのように書けば……。

/ キーボード操作の時だけ、特別なスタイルを適用する /
.is-keyboard-user a:focus {
outline: 3px solid #ff6b6b;
outline-offset: 2px;
}

これで、マウス操作の邪魔をせず、かつキーボードユーザーにはしっかりとしたガイドを表示できるようになります。まさに「誰にでも使いやすい」Webサイトへの第一歩ですね。

—

最後に：小さな配慮が「プロの仕事」を作る