こんな人に読んでほしい

エンジニア
アクセシビリティに興味がある方
サイトやアプリのアクセシビリティ対応に重力したい方

tabindexとは？

tabindexとは、タブキーで操作するときに、フォーカスが当たるかどうかを指定するときに使うものです。
パソコンを使う人全員がマウスで操作しているわけではなく、キーボード操作のみで画面の情報を収集している人がいます。
そのような人たちは、タブキーを使って、文章や項目を移動させることがあります。
視覚障害があり、スクリーンリーダー（音声読み上げ）を使う人もその一人です。

どうやって使うの？

このtabindexは指定する数字によってフォーカスが当たるかどうかが変わってきます。

tabindex="0" 記載した順番にフォーカスが当たる
tabindex="1" 数字の順番にフォーカスが当たる。
tabindex="-1" フォーカスを当てない（記載しないのと同じ）

フォーカス可能な要素（リンク、ボタン、フォームなど）に対して、キーボードでのフォーカスの順序を指定するためのHTML属性です。デフォルトでは、ブラウザはHTML要素を上から下に読み込み、フォーカス可能な要素間をTabキーで移動しますが、tabindexを使うことでこの順序をカスタマイズできます。

基本的な使い方

tabindex="0"：デフォルトのタブ順序

通常のタブ順序の中に要素を追加したい場合、tabindex="0"を使用します。例えば、divやspanなど、フォーカスできない要素に対してこれを指定することで、キーボード操作でもその要素にフォーカスできるようにします。

<div tabindex="0">この要素はTabキーでフォーカス可能です。</div>

tabindex="1"以降：タブ順序のカスタマイズ

タブ順序を指定したい場合、tabindex="1"やそれ以上の値を使用します。例えば、次のようにフォームの要素にカスタム順序を設定できます。

<form>
  <input type="text" placeholder="名前" tabindex="2">
  <input type="text" placeholder="メールアドレス" tabindex="1">
  <button type="submit" tabindex="3">送信</button>
</form>

この例では、メールアドレスフィールドが最初にフォーカスされ、その後に名前フィールド、最後に送信ボタンがフォーカスされます。

tabindex="-1"：フォーカス可能だがタブキーでは移動しない

tabindex="-1"は、要素をTabキーでフォーカスさせたくない場合に使用します。ただし、JavaScriptなどでプログラム的にフォーカスを移動させることは可能です。

<div tabindex="-1" id="modal">この要素はTabキーでフォーカスできません。</div>
<script>
  document.getElementById("modal").focus(); // プログラム的にフォーカスを移動
</script>

応用的な使い方

モーダルダイアログでのtabindex

モーダルダイアログの実装時、tabindex="-1"を使って、モーダル外の要素をフォーカスから外し、モーダル内の操作に集中させることができます。

<div class="modal" tabindex="-1" role="dialog">
  <button tabindex="1">閉じる</button>
  <p>ここはモーダルダイアログの内容です。</p>
  <button tabindex="2">保存</button>
</div>

このように、ダイアログ内でのみフォーカスを循環させることで、ユーザーが他のページ要素に誤ってフォーカスを移動させることを防ぐことができます。

アクセシブルなスキップリンク

アクセシビリティを高めるために、スキップリンクを提供するのも一般的です。tabindexを使って、キーボードでのナビゲーションを改善します。

<a href="#main-content" tabindex="1" class="skip-link">メインコンテンツへ移動</a>

<!-- 他のコンテンツ -->

<main id="main-content" tabindex="-1">
  <h1>メインコンテンツ</h1>
  <p>ここがメインのコンテンツです。</p>
</main>

スキップリンクを使うことで、画面リーダーやキーボードユーザーが簡単にメインコンテンツにアクセスできるようになります。

tabindexの注意点

過剰にtabindexを使用すると、かえってフォーカスの順序が混乱し、上の項目から順番に閲覧ができなくなります。通常はtabindex="0"を使い、タブ順序をカスタマイズするのは最小限に抑えるのが適切です。
負の値（tabindex="-1"）を使うと、要素はTabキーでフォーカスされませんが、JavaScriptなどでプログラム的にフォーカスを当てる必要があるモーダル内などで役立ちます。

最後に

今回はtabindexについてまとめてきました。
tabindexは、Webページのアクセシビリティを向上させるために重要なツールです。
適切に使用することで、キーボード操作を行うユーザーにとっても、スムーズで直感的な操作が可能になります。
色々なWebサイトを見ていると、まだ、タブキー操作でフォーカスが当たらず、見たいサイトの情報を満足に得られないことも多々あります。
今回の記事を参考にして、開発に組み込めそうな時はぜひ試してみてください。
ここまで読んでいただきありがとうございました。