tabindex=""
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | グローバル属性 |
tabindex属性は、Tabキーによるフォーカスの移動順序、および要素がフォーカス可能かどうかを指定します。
<a href="index.html" tabindex="1">リンクテキスト</a>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
tabindex="" |
フォーカスの移動順序など | 数値 | 0 、正の整数、負の整数で指定 |
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属性はグローバル属性のため、全てのHTML要素に指定することができます。（dialog要素を除く）
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
- 旧HTMLからの変更点
-
- HTML5：指定できる要素が大幅に増えました。（7種類の要素 → 全ての要素）
- HTML5：負の整数値を指定できるようになりました。
- HTML5：以前の仕様では値の上限値が
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"： （これを最初に選択してください）
- 上記のような順序はユーザーの混乱を招くため、通常は行わないようにしてください。
- ブラウザにより挙動が異なる場合があるようです。