tabindex
tabindex グローバル属性は、開発者が HTML要素をフォーカス可能にし、(ふつうは名前の由来である Tab キーによる)順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。
試してみましょう
値としては整数値を受け付け、値によって次のような様々な結果になります。
メモ: HTML 要素がレンダリングされ、その tabindex 属性が有効な整数値である場合、その要素は JavaScript で(focus() メソッドを呼び出すことで)フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の tabindex 値は、その要素が tabbable (キーボードによる連続したナビゲーション、通常は Tab キーで到達可能)であるかどうかを制御します。
- 負の数 (正確な値は重要ではありませんが、ふつうは
tabindex="-1")は、その要素がキーボードの順次ナビゲーションでは到達できないことを意味します。メモ: tabindex="-1"` は、Tab キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。
tabindex="0"は、要素がキーボードの順次ナビゲーションで、tabindexが正の値の要素の後にフォーカスを持つことが可能であることを意味します。これらの要素のフォーカスナビゲーション順は、文書のソース内の順序で定義されます。- 正の数は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、
tabindex="4"はtabindex="5"よりも前にフォーカスが来ますが、tabindex="3"よりも後だということです。複数の要素に同じ正の数のtabindexが指定された場合は、文書のソース内の互いの位置に従った順序になります。tabindexの最大値は 32767 です。 - もし
tabindex属性が値なしで記述された場合、その要素をフォーカス可能にするかどうかは、ユーザーエージェントが決定します。警告:
tabindexの値として、0と-1のみを使用することをお勧めします。tabindexの値を0より大きくしたり、フォーカス可能な HTML 要素の順序を変更できる CSS プロパティ(フレックスアイテムの並べ替え)を使用したりしないようにしましょう。これは、キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。代わりに、論理的な順序で要素を記述してください。
フォーカス可能な HTML 要素の中には、ユーザーエージェントによって、tabindex に 0 の既定値が与えられるものがあります。これらの要素は href 属性を持つ <a> または <area>、<button>、<frame>
非推奨
、<iframe>、<input>、<object>、<select>、<textarea>、SVG の <a> 要素、あるいは <details> 要素の概要を提供する <summary> 要素があります。開発者は既定の動作を変更しない限り、これらの要素に tabindex 属性を追加しないでください(例えば、負の値を記載すると、フォーカスされたナビゲーション順序から要素が削除されます)。
警告: tabindex 属性は <dialog> 要素に使用してはいけません。
アクセシビリティの考慮事項
キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに tabindex 属性を組み合わせて使用することは避けてください。例えば、 <button> 要素を使用する代わりに <div> 要素を使用してボタンを記述する場合などです。
対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに(<a>、<button>、<details>、<input>、<select>、<textarea> などの)対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。
仕様書
| Specification |
|---|
| HTML Standard # attr-tabindex |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- すべてのグローバル属性。
HTMLElement.tabIndexは、この属性を反映します。tabindexに関するアクセシビリティの問題について、 Adrian Roselli による Don't Use Tabindex Greater than 0 を参照。