tabindex
tabindex グローバル属性は、開発者が HTML 要素をフォーカス可能にし、(ふつうは名前の由来である Tab キーによる)順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 3.1 | 18 | 2 | |
| DOM API | ||||||
| tabIndex は HTMLElement インターフェイスのプロパティで、現在の要素のタブの順序を表します。 | 1 | 18 | 1 | 3.1 | 18 | 2 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (18)
実装メモ
- 明示的な tabindex 属性を持たない要素に対して不正な値を返しました。詳細は issue 4365703 を参照してください。
基本構文
HTML
<!-- make focusable (included in tab order) --> <div tabindex="0" role="button">custom button</div> <!-- focusable only from program --> <div tabindex="-1" id="notification">notification area</div> <!-- order specified with tabindex="0" or higher (deprecated) --> <input tabindex="1"> <input tabindex="2"> ライブデモ
実務での使いどころ
-
tabindex の活用
tabindex グローバル属性は、開発者が HTML 要素をフォーカス可能にし、(ふつうは名前の由来である Tab キーによる)順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。