tabindex

tabindex グローバル属性は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示します。

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

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

    負の値はオフスクリーンのコンテンツで特定のイベントにより現れる場合に有用です。ユーザーは負の tabindex が付いた要素に、キーボードを使用してフォーカスを与えることはできませんが、スクリプトは focus() メソッドを呼び出すことでフォーカスを与えることはできます。

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

    tabindex の値に0よりも大きな値を使用することは避けてください。そうすると、支援技術に頼っている人がページコンテンツを移動したり操作したりすることが難しくなります。代わりに、論理的な順序で要素を並べて文書を書いてください。

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

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

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに 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> 要素でのみ対応。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
tabindexChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報