We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

CSS による位置指定はタブ順序に影響せず、要素の見た目の順序を変更するだけです。タブ順序は DOM 上の順序に一致します。

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

複数の要素に同じ正の値を与えると、フォーカスがその間で移動することになり、要素の tabindex 属性の値で操作が混乱することになるので推奨されません。代わりに、 DOM の正しい順番でフォーカスを書くようにしてください。

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

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

仕様書

仕様書 策定状況 コメント
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,