tabindex 属性フォーカス移動の順番を指定する

tabindex 属性は、TAB キーなど、キーボード操作によるフォーカス移動 (Sequential focus navigation) の優先順位を指定します。

tabindex 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。tabindex 属性は、整数を値として持つことができます。

  • tabindex 属性がない場合
  • 値が不正 (空文字列含む) な場合
  • 値が負の整数の場合
  • 値が 0 の場合
  • 値が正の整数の場合

それぞれにおいて、下記のように挙動と優先順位が定められています。

属性値ごとの挙動

tabindex 属性がない、または値が不正な場合
ユーザエージェントは、該当する要素がフォーカス可能か、また Tab キーによるフォーカス移動が可能かを調べ、どちらも可能であれば優先順位を自身で判断する
値が負の整数の場合
フォーカスは可能にする必要があるが、Tab キーによる移動はできないようにする
値が 0 、または正の整数の場合
フォーカスを可能にし、Tab キーによる移動も可能にする

属性値ごとのフォーカス優先順位

  1. 値に最小の正の整数を持つもの
  2. 値に2番目に大きい正の整数を持つもの~以降は小さい順に
  3. 値に最大の正の整数を持つもの
  4. 値に 0 を持つもの
  5. 値が不正、または tabindex 属性持たないが、TAB キーによるフォーカス移動が可能な要素

同列のものがある場合は、文書内での DOM ツリー上、上位に位置するものから順番になります。

tabindex 属性の仕様

この属性を使用できる要素
  • すべての HTML 要素

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ