タブインデックスの設定方法

タブインデックスの設定方法

 HTMLをフロントエンドとして入力画面を作成する場合、問い合わせ画面等で複数のinputを配置する場合、タブ制御は必須です。多くのリテラシーの高いユーザーはこのような画面ではタブによりフォーカスを変えていこうとします。これに対応するため、以下tabindexを設定するようにして下さい。


tabindex

 まず、要素ごとデフォルトでフォーカスが有効な要素と無効な要素があります。

フォーカス有効 a、input等
フォーカス無効 p、span等

 フォーカス無効な要素を有効にするには明示的にtabindexを指定する必要があります。元々フォーカス有効な要素はtabindexを指定しなくても良いのですが、順序を指定するためにtabindexを記載します。
 逆にフォーカス有効な要素を無効にする場合はtabindexに負の値を設定します。これによりタブ遷移はしなくなりますが、クリックによる選択はもちろん可能です。


tabindex値 説明
1、2、3~(正数) 数字の小さい順にタブストップする。同一の数字がある場合は配置が早い順。
-1、-2、-3~(負数) タブストップしない。
0 タブストップする。タブ順序はノーコントロール。

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




tabindexと併せてfocus、outlineの設定

 tabindexを利用する際はCSSにてフォーカス時のアウトライン設定も併せて行うのが一般的です。
 疑似クラスfocus
 outlineプロパティ
 を確認して下さい。




 Copyright IT SKILL MAP. All rights reserved.