タブインデックス属性

属性 tabindex は、Tabキーを使用して要素間を移動する際のフォーカス取得順序を設定します。

このキーを押すことで、ページ上の一部の要素（リンクやフォーム要素）を順番にアクティブにすることができます。アクティブな要素は入力フォーカスを受け取ります。

input や textarea タイプの入力フィールドでは、フォーカスはフィールド内でカーソルが点滅し、テキストを入力できる状態になることで示されます。リンクやその他の要素の場合は、何らかの方法でハイライト表示されます（下線、点線の境界線など。ブラウザによって異なります）。

フォーカスを取得した時点で要素がページ上に表示されていない場合（スクロールによる）、ページはその要素までスクロールします。

要素に tabindex 属性が設定されていないか、値が 0 の場合、Tabキーによる移動はHTMLコード内での要素の出現順に従って行われます。

ページ上に tabindex が設定されている要素がある場合、移動はまずそれらの要素に対して、属性値の小さいもの（最小は1）から始まり、属性値の昇順に進みます。そのような要素がすべて終わると、tabindex が設定されていないか値が 0 の要素に対して移動が行われます。

属性値は 1 から無限大までの整数です。番号が飛んでいても問題はありません（例えば、番号 2 がない場合、最初にフォーカスが当たるのは tabindex が 1 の要素、次は tabindex が 3 の要素になります）。

ページ上でTabキーを押した時点でフォーカスがある要素がある場合（フォーカスはTabキーだけでなく、マウスクリックや autofocus 属性によっても取得できます）、次にTabキーを押すと、現在フォーカスされている要素の次にある要素（例えば、現在 tabindex が 3 の要素にフォーカスがある場合、次は tabindex が 4 の要素）がフォーカスを受け取ります。

入力フィールドに disabled 属性が設定されている場合、たとえ tabindex 属性が設定されていても、Tabキーによる移動では無視されます。

tabindex 属性は、a、input、textarea、button、select、area タグに適用されます。

例

インプットに tabindex 属性を設定してみましょう。順番にTabキーを押すと、入力フォーカスが最初のインプットから4番目のインプットに移動し、その後はページの先頭からリンクに移動する様子が確認できます（設定された tabindex 属性を持つ要素がそれ以上ないため）：

:

関連項目