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はウェブサイトのアクセシビリティを高めてユーザーエクスペリエンスを改善するのに大きな役割をします。しかし、適切に使用しないとむしろ混乱を招く可能性があるので、基本的な動作をよく理解して慎重に使うようにしましょう。
要約すると
- 可能な限り自然なHTMLの流れに従おう
- 正のtabindex値は避ける
tabindex="0"
はインタラクティブな要素にだけ使おうtabindex="-1"
はプログラム的なフォーカスが必要な要素にのみ使用しましょう。- ARIA 属性と一緒に使用して、最大限のアクセシビリティを確保しましょう。