tabindex 属性 （HTMLグローバル属性）

HTMLのtabindex属性の説明です。tabindex属性は、フォーカスの可否を制御し、フォーカス可の場合はTabキーによる移動順序を定義する属性です。

---

目次

1. 属性の記述例
   • 閲覧中ブラウザーでの表示結果
2. 属性の説明
3. 利用可能な属性値

属性の記述例

<a href="https://www.yahoo.co.jp" tabindex="2">Yahoo</a>
<a href="https://www.google.co.jp" tabindex="1">Google</a>
<a href="https://www.rakuten.co.jp" tabindex="-1">楽天</a>
<a href="https://www.bing.com" tabindex="3">Bing</a>

 

閲覧中ブラウザーでの表示結果

上記枠内をクリックし、キーボードのTabキーを押すと、フォーカスの順番が制御されていることが確認できます。

 

属性の説明

• tabindex属性は、フォーカスの可否を制御し、フォーカス可の場合はTabキーによる移動順序を定義する属性です。
• tabindex属性は、グローバル属性であるため、すべての要素で利用することができます。

 

利用可能な属性値

属性値	属性値の説明
フォーカス移動の優先順位	優先順位として数値を設定することができます。数値が小さい方から順にフォーカスが遷移していきます。設定する数値によって、Tabキーの有効・無効が以下のようになります。 0以上の整数の場合は、Tabキーによる移動可 0未満の整数の場合は、Tabキーによる移動不可