Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
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
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 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">

ライブデモ

Tab ki-. ordercontrol

ki-bo-dnavigation. order and focuspossible control. with tabindex

プレビュー全画面表示

custommain. Focus

Normal is focus in div equal focuspossible to. with tabindex=0

プレビュー全画面表示

tabindex Value. meaning

tabindex positivevalue, 0, -1. Difference.

プレビュー全画面表示

実務での使いどころ

  • tabindex の活用

    tabindex グローバル属性は、開発者が HTML 要素をフォーカス可能にし、(ふつうは名前の由来である Tab キーによる)順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。