【HTML Living Standard】tabindex属性の使い方

tabindexプロパティは、HTML要素がキーボードナビゲーションにおいてフォーカスを受けられるかどうか、およびそのフォーカス順序を制御するためのグローバル属性であるプロパティです。このプロパティは、キーボードのみでウェブページを操作するユーザー、特にアクセシビリティを考慮する上で非常に重要です。

tabindexには整数値を設定します。値が負の値（例: -1）の場合、その要素はタブキーによるナビゲーションからは除外されますが、JavaScriptなどのプログラムからフォーカスを設定することは可能です。これは、視覚的には存在するが、通常のタブ順序ではスキップしたい要素に利用されます。

値が 0 の場合、その要素はタブキーでのナビゲーション順序に含まれます。このときのフォーカス順序は、HTMLドキュメント内での要素の出現順序に従います。通常、ボタンやリンクなどのインタラクティブな要素は自動的にフォーカス可能ですが、div や span などの非インタラクティブな要素にプログラムでフォーカスを当てたい場合に tabindex="0" を設定します。

値が正の値（例: 1 以上）の場合、その要素はタブキーでのナビゲーション順序に含まれ、tabindexの値が小さい要素から順にフォーカスされます。同じ値を持つ複数の要素がある場合、それらの要素間ではドキュメント内での出現順序が適用されます。この機能は、特定の要素に優先的にフォーカスさせたい場合に利用できますが、通常の順序を乱す可能性があるため、慎重な利用が推奨されます。

tabindexプロパティを適切に使用することで、キーボード操作のみでウェブサイトを利用するユーザーの利便性が大幅に向上し、ウェブコンテンツ全体のアクセシビリティが向上します。

Copy
1<button tabindex="0">Example Button</button>

引数なし

引数はありません

戻り値なし

戻り値はありません