tabindex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

tabindex グローバル属性は、開発者が HTML要素をフォーカス可能にし、（ふつうは名前の由来である Tab キーによる）順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。

試してみましょう

値としては整数値を受け付け、値によって次のような様々な結果になります。

メモ: HTML 要素がレンダリングされ、その tabindex 属性が有効な整数値である場合、その要素は JavaScript で（focus() メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の tabindex 値は、その要素が tabbable （キーボードによる連続したナビゲーション、通常は Tab キーで到達可能）であるかどうかを制御します。

  • 負の数 （正確な値は重要ではありませんが、ふつうは tabindex="-1"）は、その要素がキーボードの順次ナビゲーションでは到達できないことを意味します。

    メモ: tabindex="-1"` は、Tab キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。

  • tabindex="0" は、要素がキーボードの順次ナビゲーションで、tabindex が正の値の要素の後にフォーカスを持つことが可能であることを意味します。これらの要素のフォーカスナビゲーション順は、文書のソース内の順序で定義されます。

  • 正の数は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 tabindex="4" は tabindex="5" よりも前にフォーカスが来ますが、 tabindex="3" よりも後だということです。複数の要素に同じ正の数の tabindex が指定された場合は、文書のソース内の互いの位置に従った順序になります。 tabindex の最大値は 32767 です。

  • もし tabindex 属性が値なしで記述された場合、その要素をフォーカス可能にするかどうかは、ユーザーエージェントが決定します。

    警告: tabindex の値として、0 と -1 のみを使用することをお勧めします。tabindex の値を 0 より大きくしたり、フォーカス可能な HTML 要素の順序を変更できる CSS プロパティ（フレックスアイテムの順序）を使用したりしないようにしましょう。これは、キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。代わりに、論理的な順序で要素を記述してください。

フォーカス可能な HTML 要素の中には、ユーザーエージェントによって、tabindex に 0 の既定値が与えられるものがあります。これらの要素は href 属性を持つ <a> または <area>、<button>、<frame> 、<iframe>、<input>、<object>、<select>、<textarea>、SVG の <a> 要素、あるいは <details> 要素の概要を提供する <summary> 要素があります。開発者は既定の動作を変更しない限り、これらの要素に tabindex 属性を追加しないでください（例えば、負の値を記載すると、フォーカスされたナビゲーション順序から要素が削除されます）。

警告: tabindex 属性は <dialog> 要素に使用してはいけません。

アクセシビリティの考慮事項

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに tabindex 属性を組み合わせて使用することは避けてください。例えば、 <button> 要素を使用する代わりに <div> 要素を使用してボタンを記述する場合などです。

対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに（<a>、<button>、<details>、<input>、<select>、<textarea> などの）対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。

仕様書

Specification
HTML Standard
# attr-tabindex

ブラウザーの互換性

BCD tables only load in the browser

関連情報