tabindex グローバル属性は、要素が入力フォーカスを持てる場合に、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示します。値としては整数値を受け付け、値によって次のような様々な結果になります。

  • 負の数 (ふつう tabindex="-1") は、要素はフォーカスを持つことが可能であるが、キーボードの順次ナビゲーションでは到達できないことを表します。主に JavaScript で作成される操作可能なウィジェットで有用です。

これは、画面に表示されず特定のイベントで現れるコンテンツがあるときに便利です。負の tabindex が付いた要素は、キーボードを使用してフォーカスを与えることはできませんが、 focus() メソッドを呼ぶことでフォーカスを与えることはできます。

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

CSS による配置はタブ順序には影響せず、要素の視覚的な順序のみを変更します。タブ順序は DOM 上の順序に対応します。

1よりも大きい tabindex の値を使用することは避けてください。そうすると、支援技術に頼っている人がページコンテンツを操作するのが難しくなるでしょう。

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

要素に正の値を設定することは推奨されません。これらの間を飛び飛びに移動することになり、要素の tabindex 属性値の間で操作が混乱するでしょう。代わりに、 DOM 上の順序にフォーカスが合うように書いてください。

<div> 要素で tabindex を設定する場合は、子のコンテンツにも tabindex を設定しなければ、矢印キーを使用して子のコンテンツをスクロールできなくなります。tabindex のスクロール効果を理解するには、こちらの fiddle を確認してください

メモ: tabindex の最大値は32767です。指定しない場合は、既定値の 0 をとります。

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

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

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

仕様書

仕様書 状態 備考
HTML Living Standard
tabindex の定義
現行の標準 最新のスナップショットである HTML 5.1 から変更なし。
HTML 5.1
tabindex の定義
勧告 HTML Living Standard のスナップショットであり、 HTML5 から変更なし。
HTML5
tabindex の定義
勧告 HTML Living Standard のスナップショット。 HTML 4.01 Specification との違いは、すべての要素でこの属性をサポートしたことです (グローバル属性化)。
HTML 4.01 Specification
tabindex の定義
勧告 <a>, <area>, <button>, <object>, <select>, <textarea> 要素でのみ対応していました。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,