tabindex=""

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O

tabindex属性は、Tabキーによるフォーカスの移動順序などを指定します。


<a href="index.html" tabindex="1">リンクテキスト</a>

属性
グローバル属性
tabindex="" 移動順序 数値 整数で指定

tabindex属性の状態

tabindex属性の状態により、その要素がフォーカスされるかどうかが決まります。

フォーカス可能な要素: a要素やinput要素、他 フォーカス不可の要素: p要素やspan要素、他(本来はフォーカスできない要素)

状態 フォーカス可能な要素 フォーカス不可の要素
tabindex属性が指定されていない
  • クリック: フォーカスできる
  • タブ移動: 出現順序でフォーカスが移動する
  • クリック: フォーカスできない
  • タブ移動: フォーカスされない
値に負の整数が指定されている
  • クリック: フォーカスできる
  • タブ移動: フォーカスされない
  • クリック: フォーカスできる
  • タブ移動: フォーカスされない
値に 1 以上の整数が指定されている
  • クリック: フォーカスできる
  • タブ移動: 値の順序でフォーカスが移動する
  • クリック: フォーカスできる
  • タブ移動: 値の順序でフォーカスが移動する
値に 0 が指定されている
  • クリック: フォーカスできる
  • タブ移動: 出現順序でフォーカスが移動する
  • クリック: フォーカスできる
  • タブ移動: 出現順序でフォーカスが移動する

上記をまとめると次のようになります。

  • 本来はフォーカスできない要素でも、tabindex属性を指定するとフォーカスが可能になります。
  • tabindex属性に負の整数が指定されている場合は、Tabキーによるフォーカスの移動からは除外されます。(クリックによるフォーカスは可能)
  • tabindex属性に 1 以上の整数が指定されている場合は、Tabキーによるフォーカスの移動順序は値の大きさによって決まります。
  • tabindex属性に 0 が指定されている場合は、Tabキーによるフォーカスの移動順序は出現順になります。
  • 不正な値が指定されている場合は、tabindex属性を指定しなかった場合と同じになります。

フォーカスの移動順序

Tabキーによるフォーカスの移動順序は、次の規則で決まります。

tabindex属性に 1 以上の整数が指定されている場合は、小さい数字から大きい数字に移動します。

123

その後に、tabindex属性に 0 が指定された要素、またはtabindex属性が指定されていないフォーカス可能な要素が出現順で続きます。

123 → これ以降は出現順(0 または フォーカス可能な要素)
  • tabindex属性に負の値(マイナス値)が指定されている場合は、Tabキーではフォーカスされなくなります。
  • tabindex属性に 0 が指定されている要素は、tabindex属性が指定されていないフォーカス可能な要素と同じ扱いになります。

tabindex属性の値は、必ずしも連番である必要はありません。また、任意の数字で開始することができます。

3569

複数の要素に同じ数字が指定されている場合は、出現順でフォーカスが移動することになります。

12223

指定できる要素

tabindex属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

HTML5における変更点
  • 指定できる要素が大幅に増えました。(7種類の要素 → 全ての要素)
  • 負の値を指定できるようになりました。
  • 指定できる値の上限(32767)がなくなったようです。

使用例

下から上にフォーカスを移動させた例
  • Tabキーを押す前に、一番の入力欄を選択しておいてください。

<p>tabindex="4":<input type="text" tabindex="4"></p>

<p>tabindex="-1":<input type="text" tabindex="-1"></p>

<p tabindex="0">tabindex="0"</p>

<p><a href="index.html" tabindex="3">tabindex="3"</a></p>

<p tabindex="2">tabindex="2"</p>

<p>tabindex="1":<input type="text" tabindex="1"></p>

表示例

tabindex="4": (これが4番目、これ以降ページのトップに移動し、その後出現順でフォーカス)

tabindex="-1": (これはスキップされます)

tabindex="0" (これは出現順でフォーカス)

tabindex="3" (これが3番目)

tabindex="2" (これが2番目)

tabindex="1": (これを最初に選択してください)

  • ブラウザにより挙動が異なるようです。