皆さん、こんにちは！世界最高峰のフロントエンド・スペシャリストであり、技術メディアの主筆ライターとして、今日も皆さんのWeb制作ライフがもっと楽しく、もっと奥深くなるようなお話をしていきましょう！

Webサイトを作っていると、つい見た目のデザインや、マウスでサクサク動くアニメーションに目が行きがちですよね。もちろんそれもとっても大事！でも、ちょっと立ち止まって考えてみてほしいんです。「もしマウスが使えなかったら、このサイトってどうなるんだろう？」って。

実は、Webサイトの「使いやすさ」って、マウス操作だけでは測れない、もっと奥深い世界があるんですよ。特に、皆さんが普段から何気なく使っている「リスト」要素。これ、キーボードだけでスムーズに操作できるようになると、驚くほど色々な人にとって便利なサイトに変わっていくんです！

今回は、`

—

なんでキーボード操作が大事なの？〜Webサイトの「バリアフリー」を考えよう〜

突然ですが、あなたはこんな経験ありませんか？

マウスの電池が切れちゃった！
コーヒーを片手に、もう片方の手でキーボードだけを操作したい！
怪我をして、一時的にマウスが使えない…。

こんな時、「あぁ、キーボードだけでWebサイトをスイスイ操作できたら便利なのに！」って思いますよね。実は、この「キーボードだけで操作できる」というのは、単なる便利機能にとどまらない、Webサイトの「バリアフリー」を考える上でとっても大切なことなんです。

「アクセシビリティ」って何だろう？

Webの世界では、「アクセシビリティ」という言葉をよく耳にします。これは、「誰もがWebサイトにアクセスし、利用できること」という意味。たとえば、目が見えない方や見えにくい方は、スクリーンリーダーという音声読み上げソフトを使ってWebサイトを利用します。彼らにとって、マウスは使えませんから、頼りになるのはキーボード操作だけなんです。

リストのようにたくさんの情報が並んでいる場所は、特にキーボードでの操作がスムーズだと、情報を探しやすくなり、ストレスなくサイトを利用できるようになります。まるで、図書館で目当ての本を探す時に、棚の端から端まで歩いて見つけるより、特定のジャンルの棚に直接サッと行けたら便利なのと同じですよね。

さあ、この大切なキーボード操作を、あなたのWebサイトにも取り入れてみましょう！

—

まずは基本！「tabindex」でお買い物リストにフォーカスしてみよう

キーボード操作の第一歩は、「フォーカス」をコントロールすることです。

「フォーカス」って何？

「フォーカス」というのは、今、キーボードの操作対象になっている要素のこと。「どこを操作しているか」を示す目印のようなものだと思ってください。Webサイトを閲覧中、タブキーを押すと、リンクやボタンなどが順に青い枠線などで囲まれるのを見たことがあるでしょう？あれが「フォーカスが当たっている状態」なんです。

身近な例えだと、スーパーでお買い物するとき、今まさに「どれを買おうかな？」と手に取って見ている商品に、あなたの意識が集中している状態。それがWebサイトにおけるフォーカスです。

`tabindex`属性を使って、リストアイテムを「指差せる」ようにしよう！

HTMLには、このフォーカスを制御するための`tabindex`という属性があります。リストアイテムに`tabindex`を設定すると、タブキーでそのアイテムにフォーカスを当てられるようになるんですよ。

`tabindex`にはいくつか種類があります。

`tabindex=”0″`：

「よし、この要素もタブキーでフォーカスできるようにしよう！」という指示です。HTMLの通常の流れに沿って、自然な順番でフォーカスが移動するようになります。お買い物リストで、「これと、これと、これも見てみよう！」と、一つ一つの商品を順に指差していくようなイメージですね。

`tabindex=”-1″`：

「タブキーでは直接フォーカスできないけど、JavaScriptを使えばいつでも呼び出せる隠し玉だよ！」という指示です。普段は目立たないけど、いざという時に活躍する秘密兵器みたいなものです。後ほど、矢印キーでリストを操作する際に大活躍しますよ。

`tabindex=”正の整数 (1, 2, 3…)`：

「フォーカスが当たる順番を、この数字の通りに強制するよ！」という指示です。これは、HTMLの構造とは異なる順番でフォーカスを移動させたい場合に使うのですが、複雑になりがちなので、特別な理由がない限りは避けるのが一般的です。今回は触れないでおきましょう。

では、実際に`tabindex=”0″`を使って、シンプルなお買い物リストにフォーカスできるようにしてみましょう！

タブキーで操作できるお買い物リスト

今日のお買い物リスト（タブキーで試してみてね！）

牛乳
卵
食パン
バナナ
コーヒー豆

リストの上か下の要素（例えばこの文章）にフォーカスを合わせて、タブキーやShift+タブキーを押して、リストアイテムにフォーカスが当たるか試してみてください。

このコードをブラウザで開いて、タブキーをポチポチ押してみてください。どうでしょう？「牛乳」から順に、リストアイテムにフォーカスが当たるのがわかるはずです！

—

もう一歩踏み込み！「スタイル」でフォーカスを見やすくしよう

先ほどの例で、「あれ？フォーカスは当たるけど、どこに当たっているのか分かりにくいなぁ」と感じた方もいるかもしれませんね。ブラウザによってはデフォルトのフォーカススタイル（点線や青い枠線）が分かりにくいことがあります。

お買い物中に、あなたがどの商品を指差しているか、周りの人にもハッキリと分かった方が、よりスムーズにお買い物ができますよね？それと同じで、フォーカスが見えづらいと、ユーザーは今どこを操作しているのか迷ってしまいます。

そこで、CSSを使ってフォーカス時の見た目をハッキリとさせましょう！
先ほどのCSSコードにも既に記述しましたが、特に重要な部分を再確認です。

/ ここからが重要！フォーカスが当たった時のスタイル /
li:focus {
outline: 2px solid deepskyblue; / ブラウザ標準の枠線をカスタム /
outline-offset: 2px; / 枠線と要素の間に少し隙間 /
background-color: #e0f7fa; / フォーカス時の背景色 /
}

`outline`: 要素にフォーカスが当たったときに表示される枠線のスタイルを指定します。`border`と違い、要素のレイアウトに影響を与えないのが特徴です。ここでは「2pxの太さで、実線、色はdeepskyblue」と指定しています。
`outline-offset`: `outline`と要素本体の間に隙間を作りたいときに使います。
`background-color`: フォーカス時に背景色を変えることで、さらに視覚的に分かりやすくしています。

これで、タブキーでリストアイテムにフォーカスを当てたときに、「今、ここにフォーカスが当たっているぞ！」と一目でわかるようになりましたね。

—

レベルアップ！矢印キーでリスト内をスイスイ移動してみよう

タブキーでフォーカスを移動できるようになったのは素晴らしい進歩です！でも、もしリストの項目が何十個もあったらどうでしょう？タブキーを何十回もポチポチ押すのは、ちょっと大変ですよね…。

まるで、図書館で本を探すときに、棚を一つ一つ見ていくのではなく、指でスッと棚をなぞるように、目的の本を探せたらもっと快適だと思いませんか？

そこで登場するのが、JavaScriptを使った「矢印キー（↑↓）でのナビゲーション」です！これを使えば、まるでリモコンを操作するように、リストアイテム間をスイスイ移動できるようになりますよ。

矢印キーナビゲーションの考え方

1. どこに今フォーカスがあるか知る: まずは、今、リストのどのアイテムが「選択されている状態」なのかをJavaScriptに教えてあげる必要があります。
2. キーボードイベントを監視する: ユーザーがキーボードを「ピッ」と押した瞬間をJavaScriptでキャッチします。
3. 押されたキーを判定する: 「押されたキーは上矢印キーかな？それとも下矢印キーかな？」と判断します。
4. フォーカスを移動させる: 押されたキーに応じて、次の（または前の）リストアイテムにフォーカスを移動させます。このとき、先ほど紹介した`tabindex=”-1″`が隠し玉として活躍します！

では、この考え方に基づいて、JavaScriptコードを書いてみましょう。

矢印キーで操作できるお買い物リスト

今日のお買い物リスト（矢印キーで試してみてね！）

牛乳
卵
食パン
バナナ
コーヒー豆

まず、上記のリスト全体（枠線で囲まれた部分）にタブキーでフォーカスを当ててみてください。

フォーカスが当たったら、上下の矢印キーを押してリストアイテムを移動できるか試してみましょう！

このコードのポイントは、`

`nextItemToFocus.focus();`という部分が、JavaScriptで「この要素にフォーカスを当てて！」と命令しているところです。`tabindex=”-1″`を明示的に設定していなくても、JavaScriptの`focus()`メソッドを使うと、その要素にプログラムからフォーカスを当てることができます。これで、あなたは完璧なキーボードナビゲーションの操縦士になれましたね！

—

もう少し高度な話：WAI-ARIAの役割と「aria-activedescendant」

ここまでで、キーボード操作の基本はバッチリです！でも、Webのアクセシビリティの世界には、もっと強力な武器があるんですよ。それが「WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)」です。

WAI-ARIAは、HTMLだけでは表現しきれない、Webアプリケーションの複雑なUI（ユーザーインターフェース）の情報を、スクリーンリーダーなどの支援技術に伝えるための属性のセットです。例えるなら、Webサイトの裏側に「これはメニューだよ」「これは選択可能な項目だよ」「今、これが選ばれているよ」といった目に見えない「ラベル」を貼ってあげるイメージです。

今回のリストの矢印キーナビゲーションの例で言うと、`aria-activedescendant`という属性が活躍することがあります。

`aria-activedescendant`とは？

これは、「この要素（親要素）は、複数の子要素の中から、今アクティブになっている子要素のIDを持っているよ」とスクリーンリーダーに伝えるための属性です。

たとえば、先ほどのリスト全体にフォーカスを当てて、矢印キーで子要素を移動するようなUIでは、スクリーンリーダーは「今、親のリストにフォーカスが当たっているのはわかるけど、リストの中のどれが選ばれているの？」と迷ってしまうことがあります。

そこで、親の`

これは少し複雑な技術なので、初学者の方はいきなり使いこなす必要はありません。「へぇ、そんな属性もあるんだな」くらいに頭の片隅に置いておいて、さらにアクセシビリティを深く学びたくなった時に思い出してくださいね。

—

まとめ：あなたのWebサイトはもっと使いやすくなる！

お疲れ様でした！今回は、HTMLのリスト要素をキーボードで操作する方法について、じっくりと学んできました。

`tabindex=”0″` で、タブキーでフォーカスできるようになること
`li:focus` などのCSSで、フォーカス時の見た目を分かりやすくすること
JavaScriptで 矢印キーによるナビゲーション を実装し、リスト内をスイスイ移動できるようにすること

これらの技術は、マウスが使えない方だけでなく、キーボード操作を好む方、一時的にマウスが使えない状況の方など、あらゆるユーザーにとってWebサイトをより快適に、そして効率的に利用するための大切なステップです。

「アクセシビリティ」と聞くと、なんだか難しそう、特別なことのように感じてしまうかもしれません。でも、今日学んだように、それはほんの少しの工夫と、「みんなが気持ちよく使えるWebサイトを作りたい」というあなたの優しい気持ちから始まるんです。

あなたの作ったWebサイトが、一人でも多くの人にとって「使いやすい！」と感じてもらえるように、これからも一緒に学び、素晴らしいWeb体験を創造していきましょう！応援しています！

【入門編】リストアイテムのキーボード操作とフォーカス管理 – HTML実践ガイド