HTML tabindex グローバル属性

試してみましょう

<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;
}

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

• 負の数 （正確な値は重要ではありませんが、ふつうは 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 属性を組み合わせて使用することは避けてください。例えば、 <button> 要素を使用する代わりに <div> 要素を使用してボタンを記述する場合などです。

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

• Using the tabindex attribute | The Paciello Group

仕様書

ブラウザーの互換性

関連情報

• すべてのグローバル属性。
• HTMLElement.tabIndex は、この属性を反映します。
• tabindex に関するアクセシビリティの問題について、 Adrian Roselli による Don't Use Tabindex Greater than 0 を参照。
• Reading order