こんにちは！
1年目の小川です。
突然ですが、皆さんはtabindexを知っていますか？もしくは使っていますか？
今回は、タブキーでのキーボード操作で必要不可欠なtabindexについてまとめていきたいと思います。
こんな人に読んでほしい
- エンジニア
- アクセシビリティに興味がある方
- サイトやアプリのアクセシビリティ対応に重力したい方
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サイトを見ていると、まだ、タブキー操作でフォーカスが当たらず、見たいサイトの情報を満足に得られないことも多々あります。
今回の記事を参考にして、開発に組み込めそうな時はぜひ試してみてください。
ここまで読んでいただきありがとうございました。