tabindex=""
| ブラウザ |
|
|---|
tabindex属性は、Tabキーによるフォーカスの移動順序などを指定します。
<a href="index.html" tabindex="1">リンクテキスト</a>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
tabindex="" |
移動順序 | 数値 | 整数で指定 |
tabindex属性の状態
tabindex属性の状態により、その要素がフォーカスされるかどうかが決まります。
| 状態 | フォーカス可能な要素 | フォーカス不可の要素 |
|---|---|---|
| tabindex属性が指定されていない |
|
|
| 値に負の整数が指定されている |
|
|
値に 1 以上の整数が指定されている
|
|
|
値に 0 が指定されている
|
|
|
上記をまとめると次のようになります。
- 本来はフォーカスできない要素でも、tabindex属性を指定するとフォーカスが可能になります。
- tabindex属性に負の整数が指定されている場合は、Tabキーによるフォーカスの移動からは除外されます。（クリックによるフォーカスは可能）
- tabindex属性に
1以上の整数が指定されている場合は、Tabキーによるフォーカスの移動順序は値の大きさによって決まります。 - tabindex属性に
0が指定されている場合は、Tabキーによるフォーカスの移動順序は出現順になります。
- 不正な値が指定されている場合は、tabindex属性を指定しなかった場合と同じになります。
フォーカスの移動順序
Tabキーによるフォーカスの移動順序は、次の規則で決まります。
tabindex属性に 1 以上の整数が指定されている場合は、小さい数字から大きい数字に移動します。
1 → 2 → 3
その後に、tabindex属性に 0 が指定された要素、またはtabindex属性が指定されていないフォーカス可能な要素が出現順で続きます。
1 → 2 → 3 → これ以降は出現順（0 または フォーカス可能な要素）
- tabindex属性に負の値（マイナス値）が指定されている場合は、Tabキーではフォーカスされなくなります。
- tabindex属性に
0が指定されている要素は、tabindex属性が指定されていないフォーカス可能な要素と同じ扱いになります。
tabindex属性の値は、必ずしも連番である必要はありません。また、任意の数字で開始することができます。
3 → 5 → 6 → 9
複数の要素に同じ数字が指定されている場合は、出現順でフォーカスが移動することになります。
1 → 2 → 2 → 2 → 3
指定できる要素
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"： （これを最初に選択してください）
- ブラウザにより挙動が異なるようです。