「マウスなしでも迷わない！」aタグのフォーカス管理で、誰もが使いやすいWebサイトを作ろう
Webサイトを作っているとき、どうしても「マウスでクリックすること」を前提にデザインしてしまいがちですよね。でも、世の中にはマウスを使わずにキーボードだけでブラウザを操作している方や、スクリーンリーダー（画面読み上げソフト）を使ってWebサイトを楽しんでいる方がたくさんいらっしゃいます。
今回は、そんな「誰にとっても心地よいWebサイト」を作るための第一歩、aタグのフォーカス管理についてお話しします。
—
なぜ「Tabキー」が重要なのか？
想像してみてください。あなたは今、大きなショッピングモールの入り口に立っています。でも、目隠しをしているか、あるいは手を使わずに移動しなければならないとしたら、どうでしょう？
Webの世界における「Tabキー」は、まさにその「移動手段」です。
キーボードのTabキーを押すと、画面上のボタンやリンクが順番に選ばれていきますよね。この「今、どこが選ばれているか」という状態をフォーカスと呼びます。ここがしっかり管理されていないと、ユーザーは「今どこにいるのか分からない迷路」に放り出されたような不安を感じてしまうんです。
—
迷路を作らないために：視覚的フィードバック
まず一番大切なのは、「今、どこにフォーカスが当たっているか」をはっきりさせることです。
デフォルトの状態だと、ブラウザが勝手に青い枠線（アウトライン）を出してくれますよね。CSSでこの枠線を消してしまう方がたまにいらっしゃいますが、あれは「今ここを見ていますよ」というユーザーへの重要な合図です。
もしデザイン的に気に入らない場合は、消すのではなく「かっこよく変える」のがプロの流儀です。
/ デフォルトの青い枠を消して、自分好みにカスタマイズ /
a:focus {
outline: none; / 一旦消す /
background-color: #ffeb3b; / 背景色を変えて強調 /
box-shadow: 0 0 5px rgba(0,0,0,0.3); / 少し浮かび上がるような影をつける /
}
こうすることで、「今、ここを選びました！」という合図がはっきりとユーザーに伝わりますよね。
—
tabindexで「順番」をコントロールする
基本的に、HTMLは書かれた順番にTabキーが移動していきます。でも、たまに「ここを先に選ばせたい！」とか「ここはスキップさせたい」という場面が出てきます。そこで登場するのが `tabindex` 属性です。
1. tabindex=”0″：自然な流れに混ぜる
これを指定すると、本来はTabキーでフォーカスできない要素（divやspanなど）も、リンクと同じようにフォーカスできるようになります。
2. tabindex=”-1″：フォーカスを外す
これが意外と便利なんです。「クリックはさせたいけど、Tabキーで順番に移動するときは無視してほしい」という要素（例えば、すでに開いているメニューのボタンなど）に使うと、ユーザーの移動がスムーズになります。
—
つまずきポイント：やりすぎは禁物！
ここで一つだけ注意点。`tabindex` に `1` や `2` などの数字を入れるのは、原則としてNGです。
数字を直接指定すると、HTMLの順番を無視して強制的にフォーカス順序を変えてしまいます。これをしてしまうと、スクリーンリーダーを使っている方は「左から右へ読むはずなのに、いきなり右上のボタンに飛んだ！」と大混乱してしまいます。
基本は「HTMLの記述順＝Tabキーの移動順」を崩さないこと。これがWebアクセシビリティの鉄則です。
—
まとめ：優しさはコードに宿る
「マウスを使わないユーザー」を意識することは、実は「誰にとっても使いやすいサイト」を作るための最高の近道です。
- フォーカス状態をCSSの `:focus` でしっかり可視化する
- Tabキーの移動順序はHTMLの自然な流れを大切にする
- 必要なときだけ `tabindex` で制御する
これらを意識するだけで、あなたの作るWebサイトは、もっとたくさんの人に愛される場所になるはずです。
最初は難しく感じるかもしれませんが、まずは `:focus` に背景色をつけるところから始めてみてください。「お、自分でコントロールできている！」という実感がわいてくると、Web制作がもっと楽しくなりますよ。
大丈夫、少しずつ一緒に学んでいきましょう！
コメント