【入門編】tabindex属性によるテキスト要素のフォーカス制御 – HTML実践ガイド

「キーボードで移動できない！」を解決する魔法？ `tabindex`の正しい使い方と注意点

こんにちは！Web制作の学習、順調に進んでいますか？
HTMLを書いていると、「あれ、この見出しもキーボードで選択できたら便利じゃないかな？」なんて思うこと、ありますよね。

実は、HTMLには`tabindex`（タブインデックス）という、Webページの「カーソルの通り道」を自由に操るための魔法の属性があるんです。でも、この魔法、使い方を間違えると、かえってユーザーを迷子にさせてしまう「諸刃の剣」でもあります。

今日は、初心者さんが一番つまずきやすい「`p`タグや`h1`タグをキーボードで操作可能にする際の注意点」について、一緒に紐解いていきましょう！

—

Webの世界では、マウスを使わずに「Tabキー」を押して、リンクやボタンを順番に移動していく操作がよく行われます。これを「キーボードナビゲーション」と言います。

通常、ブラウザは「リンク（`a`タグ）」や「ボタン（`button`タグ）」を自動的に認識して、Tabキーで移動できるようにしてくれます。まるで、「ここはお店への入り口ですよ」と自動ドアが教えてくれるようなものですね。

ところが、`p`（段落）や`h1`（見出し）は、もともと「ただの文章」なので、Tabキーで移動する対象にはなっていません。そこで登場するのが `tabindex` です。

—

`tabindex=”0″` と書くと、その要素は突然「キーボードで選べる場所」に変身します。一見便利そうですよね。でも、ちょっと待ってください。

例えば、何の意味もなく `p` タグに `tabindex=”0″` をつけると、ユーザーはTabキーを叩くたびに、特に何もしなくていい文章の上で何度も止まってしまいます。

例え話：
お買い物に行って、お店の棚にある「ただの壁紙」にいちいち立ち止まらされるとしたら、どう思いますか？「えっ、何かの商品？何かのアクションができるの？」と混乱してしまいますよね。

アクセシビリティの基本は、「ユーザーを迷わせないこと」です。本当に操作が必要な要素以外には、無理に `tabindex` をつけないのが一番の優しさなんです。

`tabindex` を付与してキーボードで選択できるようにしたなら、「今、ここにいます！」というサイン（フォーカスリング）がちゃんと見えるようにしましょう。

CSSで `outline: none;` と書いて消してしまう人が多いのですが、これはキーボードユーザーにとっては「視界を奪われる」のと同じです。

ここへようこそ！

—

「どうしても、この見出しをクリックしたら何かが起きるようにしたい！」という場合はどうすればいいでしょうか？

そんな時は、`tabindex` を手当たり次第に使う前に、まずは以下の順番で考えてみてください。

1. `button`タグを使えないか？

2. `a`タグ（リンク）を使えないか？

3. どうしても `div` や `p` を使うなら…

// JavaScriptでキーボード操作を補足する例
const title = document.querySelector(‘.focusable-title’);

title.addEventListener(‘keydown’, (event) => {
// Enterキー（コード13）が押されたら反応する
if (event.key === ‘Enter’) {
alert(‘見出しがクリックされました！’);
}
});

—

`tabindex` を使うときは、「もし自分が目が見えなくて、キーボードだけでこのサイトを操作していたら、この場所で止まりたいかな？」と想像してみてください。

技術は、誰かを置いてけぼりにするためのものではなく、みんなを目的地までスムーズに運ぶための道具です。

最初は難しく感じるかもしれませんが、大丈夫！一つずつ丁寧に向き合っていけば、必ず「誰にとっても使いやすい優しいWebサイト」が作れるようになりますよ。

また次の記事で、一緒にお勉強しましょうね！