[HTML] tabindex属性について

tabindexとは？

tabindexは、HTML 要素がキーボードのフォーカスを受けることができるかどうか、そして、受ける場合、どのような順序で受けるかを制御するグローバル属性(Global Attribute)です。ユーザーがキーボードのTab キーまたはShift + Tab キーを押してウェブページ内の要素(リンク、ボタン、入力フィールドなど)の間を移動する時、このtabindex 属性がその順序と動作方法を決定します。

tabindex の値と意味

tabIndex 属性は整数値を受け取り、その値によって全く異なる動作をします。

1. tabindex="0"

要素をキーボードでナビゲーションできるようにします。インタラクティブなコンテンツ(a,button,input,textarea など...) では、特に指定しなくても、デフォルト値は 0 です。しかし、非インタラクティブコンテンツは基本値として -1 を持つので、キーボードでナビゲートしたい場合、tabindex=0のように 0 以上の値を指定する必要があります。

主に、デフォルトでフォーカスを受けないコンテナ要素をキーボードでアクセスできるようにするときに使います。

<div tabindex="0" role="button">divで作成されたボタン!</div>

2. tabindex="-1"

要素をキーボードによるナビゲーションから除外します。非インタラクティブなコンテンツでは、特に指定しなくてもデフォルトで -1 を持ちます。Tabキーではフォーカスされませんが、プログラムで設定することは可能です。

<div id="myModalContent" tabindex="-1">モーダルの内容...</div>
<script>
  document.getElementById('myModalContent').focus();
</script>

3. tabindex="正"

要素に明示的なタブの順序を与えます。 1から始まり、数字が小さい要素から順にフォーカスを受け取ります。同じ数字を持つ要素は、HTML ソースコード順にフォーカスを受けます。

⚠️ 注意してください：アンチパターンと見なされる 正のtabindexは、論理的なドキュメント構造とは異なるフォーカス順序を強制し、ユーザー (特にキーボードやスクリーンリーダーのユーザー) を混乱させ、ウェブアクセシビリティを損なう可能性があります。 また、メンテナンスも難しくなる可能性があります。

いつ使うべきか？

tabindexは一見そのまま使うのが良いように見えますが、慎重に使うべき属性です。

• tabindex="0"

  • カスタムインタラクティブエレメント 制作 :<div>,<span> など自分で作ったボタン、タブ、スライダー、メニュー項目などセマンティックHTML要素で実装するのが難しいカスタムウィジェットにキーボードアクセシビリティを付与したいときに使います。この場合、その要素が実際のインタラクティブ要素のように動作するようにJavaScriptでキーボードイベント(Enter, Spaceなど)処理ロジックを追加し、適切なaria-roleを明示し、スクリーンリーダーユーザーに要素の役割を知らせることをお勧めします。
  • タブシーケンスに要素を含める : デフォルトではフォーカスを受けない非インタラクティブなコンテンツ(例えば、特に強調したいテキストブロック)をタブシーケンスに含めることができます。

• tabindex="-1"

  • モーダルまたはダイアログ: モーダルウィンドウが開かれたとき、背景コンテンツにtabindex="-1" を適用してキーボードナビゲーションを無効にします。

まとめ

tabindexはウェブサイトのアクセシビリティを高めてユーザーエクスペリエンスを改善するのに大きな役割をします。しかし、適切に使用しないとむしろ混乱を招く可能性があるので、基本的な動作をよく理解して慎重に使うようにしましょう。

要約すると

1. 可能な限り自然なHTMLの流れに従おう
2. 正のtabindex値は避ける
3. tabindex="0"はインタラクティブな要素にだけ使おう
4. tabindex="-1"はプログラム的なフォーカスが必要な要素にのみ使用しましょう。
5. ARIA 属性と一緒に使用して、最大限のアクセシビリティを確保しましょう。