HTML tabindex グローバル属性

Baseline Widely available

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

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

仕様書

Specification
HTML
# attr-tabindex

ブラウザーの互換性

関連情報