HTML Living Standard/tabindex属性

tabindex属性

tabindex属性は、HTML要素のフォーカス順序を制御するためのグローバル属性です。この属性を使用することで、タブキーを押した際に要素がどの順番でフォーカスされるかを指定できます。フォームコントロールやリンク、ボタンなどのインタラクティブな要素に適用することができます。

基本構文

<element tabindex="value"></element>

tabindex="0": 自然な順序に従い、ブラウザが要素にタブ順を割り当てます。
tabindex="正の値": 正の値を指定することで、指定した順番でフォーカスされます。
tabindex="負の値": 負の値を指定すると、その要素はタブ順から除外されます。

使用例

以下は、tabindex属性を使った例です。

<!-- 自然な順序に従ってタブフォーカスされる -->
<input type="text" name="name" tabindex="0">
<input type="text" name="email" tabindex="0">
<button type="submit" tabindex="0">Submit</button>

<!-- 指定した順番でフォーカス -->
<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="3">
<button type="submit" tabindex="2">Submit</button>

<!-- タブ順から除外する -->
<input type="text" name="name" tabindex="0">
<input type="text" name="email" tabindex="-1">
<button type="submit" tabindex="0">Submit</button>

tabindex属性の動作

tabindex="0":
- 要素はタブ順に従い、自然な順番でフォーカスされます。
- 例えば、フォーム内の入力フィールドやボタンは、ページ上に現れる順番に従ってタブ順に従います。
tabindex="正の値":
- 正の値を指定すると、明示的にその順番を指定できます。
- より低い値の要素が先にフォーカスされます。
- タブキーで順番を変えたい場合などに役立ちます。
tabindex="負の値":
- 負の値（通常は-1）は、その要素をタブ順から除外します。
- ユーザーがタブキーでその要素をフォーカスできなくなります。
- 特に、フォーム要素やインタラクティブ要素を一時的に無効にする際に使用されます。

tabindexの使い所

タブ順序は、フォームやインタラクティブなコンテンツを使いやすくするために重要です。タブ順序を適切に指定することで、キーボード操作に優れたアクセシビリティを提供することができます。特に、フォーム内の複数の入力フィールドを扱う場合にタブ順序を明示的に指定すると、ユーザーにとって使いやすいインターフェースを作成できます。

JavaScriptを使用した制御

JavaScriptを使用して、動的にタブ順序を変更することができます。

<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
<button id="changeTabOrder">Change Tab Order</button>

<script>
  document.getElementById("changeTabOrder").addEventListener("click", function() {
    // クリック後、タブ順序を変更
    document.querySelector('input[name="name"]').setAttribute('tabindex', '3');
    document.querySelector('input[name="email"]').setAttribute('tabindex', '1');
  });
</script>

この例では、ボタンをクリックすると、タブ順序が動的に変更されます。

注意点

tabindex="0" と tabindex="正の値" は同じフォーム内で混在して使うことができますが、同じ値を持つ要素が複数ある場合、表示順序がフォーカスの順番に影響することがあります。
タブ順序を過度に変更すると、直感的でないフォーカス順序を作成してしまうことがあるので、注意が必要です。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献