HTML tabindex グローバル属性

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

試してみましょう

<p>このペインの任意の場所をクリックし、要素をタブで移動してみてください。</p>

<label>タブ順の 1 番目:<input type="text" /></label>

<div tabindex="0">tabindex によりタブ移動可能</div>

<div>タブ移動不可: tabindex なし</div>

<label>タブ順の 3 番目:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

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

メモ: 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 によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。