HTMLの「インライン要素」と仲良くなろう！キーボード操作で誰にでも優しいWebサイトを作る方法
Webサイトを作っていると、``タグや``タグなど、小さなパーツを並べる場面がよくありますよね。でも、実はその「小ささ」の裏側で、「キーボードだけで操作する人」への配慮を忘れてしまうことがよくあります。
マウスが使えない環境や、キーボードでスピーディーに操作したい方にとって、Webサイトは「視覚的な地図」であると同時に「キーボードで辿る道筋」でもあります。今日は、そんなインライン要素と仲良くなって、誰にとっても歩きやすいサイトにするための「魔法のテクニック」をお話ししますね。
—
1. なぜ「マウス以外」を考える必要があるの？
Webサイト上のボタンやリンクは、マウスでクリックするのが当たり前だと思っていませんか？ でも、世の中には身体的な事情でマウスを使えない方や、キーボードの「Tab（タブ）キー」だけでWebサイトを高速で巡回する熟練ユーザーさんもたくさんいらっしゃいます。
もし、あなたが作ったサイトで「Tabキーを押してもどこにフォーカスが当たっているか分からない」としたら、それは「暗闇の中で道を探しているのと同じ状態」なんです。
そんな迷子を作らないために、HTMLには「フォーカス」という大切な仕組みが備わっています。
—
2. tabindex（タブインデックス）で「順番」を決めよう
本来、``タグや`
もし、``にクリックイベントをつけてボタンっぽく動かしているなら、キーボードでも反応するようにしてあげましょう。ここで使うのが `tabindex` 属性です。
- tabindex=”0″: 「順番通りにフォーカスを当ててね」という標準的な合図です。
- role=”button”: スクリーンリーダー（画面読み上げソフト）に「これはボタンとして振る舞うものですよ」と教えてあげるための優しいおまじないです。
—
3. 「Enter」と「Space」で動かす！
ここからが少しだけプロの領域。``タグならEnterでリンク先に飛んでくれますが、``に `tabindex` をつけただけでは、キーボードを押しても反応しません。JavaScriptで「キーが押されたか」を検知してあげる必要があります。
const myButton = document.querySelector(‘.my-button’);
myButton.addEventListener(‘keydown’, (event) => {
// Enterキー または Spaceキーが押されたら発火！
if (event.key === ‘Enter’ || event.key === ‘ ‘) {
event.preventDefault(); // Spaceキーで画面がスクロールするのを防ぐ
alert(‘ボタンが押されました！’);
}
});
「お買い物のレジ」を想像してみてください。商品を置いて（フォーカスして）、ボタンを押す（Enter/Space）という一連の流れがスムーズだと、お買い物は快適ですよね。このコードは、その「レジ」をキーボードでも使えるようにするための重要な処理なんです。
—
4. 「どこにいるか」を視覚的に伝える `focus-visible`
最後に、一番大切な「視覚的なフィードバック」の話です。Tabキーで移動したとき、枠線（アウトライン）が出るのを見たことはありませんか？ あれは「今、ここにいますよ」という光る道しるべです。
CSSでこれを消してしまうと、操作している人は自分がどこにいるか分からなくなります。最近は `focus-visible` という便利な疑似クラスを使うのが鉄則です。
/ キーボードで操作した時だけ、分かりやすい枠線を表示する /
.my-button:focus-visible {
outline: 3px solid #ff9900;
outline-offset: 2px;
border-radius: 4px;
}
/ マウスでクリックした時は枠線を出さないようにする（見た目をすっきりさせる） /
.my-button:focus:not(:focus-visible) {
outline: none;
}
この設定をしておけば、「マウス派の人にはスッキリした見た目を」「キーボード派の人には確実な道しるべを」という、どちらにも優しい体験を提供できます。
—
最後に：小さな積み重ねが「使いやすさ」になる
いかがでしたか？ `tabindex` や `focus-visible` といった言葉は少し難しそうに聞こえますが、要するに「誰にでも使いやすい案内板を設置する」という、とても温かい気遣いのことなんです。
最初は全部を完璧にするのは難しいかもしれません。でも、まずは「自分の作ったボタン、Tabキーでちゃんと動くかな？」と確認してみるだけでも、あなたのサイトは昨日よりずっと素敵で優しい場所になりますよ。
ぜひ、次の制作で「キーボード操作」を意識してみてください。困ったことがあれば、いつでもまた聞きに来てくださいね！
コメント