tabindex - タブでフォーカスする順番を指定する

tabindexは、Tabキーによるフォーカスの移動順序を指定する属性です。値には整数を指定して下さい。移動は、値が小さい順となります。ブラウザは、ドキュメント全体の中から、この属性が指定された要素を優先的に探してフォーカスします。この属性には「通常はフォーカスされない要素をフォーカスの対象にする」という効果もあります。

説明

下記は、p要素にtabindex属性を指定した例です。試しにTabキーを何回か押して、移動してみて下さい。「おはよう」が最初にフォーカスされて、その後は、値の小さい順に移動するはずです。ここで重要なのは、ドキュメント全体で、tabindex属性が指定された要素から優先的に、順番通りにフォーカス移動することです。

HTML

<p tabindex="10">おはよう</p>
<p tabindex="30">こんにちは</p>
<p tabindex="20">こんばんは</p>

おはよう

こんにちは

こんばんは

0を指定した場合

値に0をした場合、その要素は、Tabキーで移動した時のフォーカスの対象になります。ただし、優先はされません。下記のp要素が、Tabキーによるフォーカスの対象にはなっているけど、順番が優先されていないのを確認して下さい。

HTML

<p tabindex="0">おはよう</p>

おはよう

負の値を指定した場合

値に-1をした場合、その要素は、クリックしてフォーカスできるようになります。ただし、Tabキーによるフォーカスの対象にはなりません。

HTML

<p tabindex="-1">おはよう</p>

おはよう

参考情報

tabindex属性に関する情報は、下記ページで確認できます。

  • W3C … W3Cによる勧告案。
  • WHATWG … WHATWGによる仕様書、HTML Living Standard。