タブインデックスの設定方法
HTMLをフロントエンドとして入力画面を作成する場合、問い合わせ画面等で複数のinputを配置する場合、タブ制御は必須です。多くのリテラシーの高いユーザーはこのような画面ではタブによりフォーカスを変えていこうとします。これに対応するため、以下tabindexを設定するようにして下さい。
tabindex
まず、要素ごとデフォルトでフォーカスが有効な要素と無効な要素があります。
フォーカス有効 | a、input等 |
フォーカス無効 | p、span等 |
フォーカス無効な要素を有効にするには明示的にtabindexを指定する必要があります。元々フォーカス有効な要素はtabindexを指定しなくても良いのですが、順序を指定するためにtabindexを記載します。
逆にフォーカス有効な要素を無効にする場合はtabindexに負の値を設定します。これによりタブ遷移はしなくなりますが、クリックによる選択はもちろん可能です。
tabindex値 | 説明 |
1、2、3~(正数) | 数字の小さい順にタブストップする。同一の数字がある場合は配置が早い順。 |
-1、-2、-3~(負数) | タブストップしない。 |
0 | タブストップする。タブ順序はノーコントロール。 |
tabindexはグローバル属性です。全ての要素に設定することができます。