グローバル属性~“tabindex”属性

“tabindex”属性について

“tabindex”属性は要素がキーボードによる順次ナビゲーションによってフォーカスできるかどうかとフォーカスの移動順序を指定する属性です。

通常は以下の要素がフォーカスすることができます。

• “href”属性がある“a”要素
• “disabled”属性がない“button”要素
• “disabled”属性がなく、“type”属性の値が“hidden”以外の“input”要素
• “disabled”属性がない“select”要素
• “disabled”属性がない“textarea”要素
• “draggable”属性がある要素
• “area”要素で表されるイメージマップの領域
• “controls”属性がある“audio”要素と“video”要素
• その他のユーザー操作可能なコンテンツ

“tabindex”属性を指定した場合、通常フォーカスしない要素もフォーカスできるようになります。

“tabindex”属性を指定しない場合、順次ナビゲーションで要素がフォーカスされる順番は文書のソースにその要素が記述された順番となります。スタイルシートによる配置順序の変更はフォーカスの順番には影響しません。

指定できる値

フォーカスされる順番は、“tabindex”属性で順番が指定された要素が数が小さい順番にフォーカスされ、その後に順番が指定されていない要素(“tabindex”属性を指定していない要素と“tabindex”属性の値が“0”の要素)が文書内に記述された順番にフォーカスされます。

値に同じ正の整数を指定した要素が複数ある場合は文書内に記述された順番でフォーカスされます。

負の整数を指定した場合はクリックによりフォーカスできますが、キーボードによる順次ナビゲーションではフォーカスすることができません。通常、値は“-1”を指定します。

サンプルコード

フォーカスの移動順序を指定しない
<p><input type="text" tabindex="0"></p>

“1”をフォーカスの移動順序に指定
<p><input type="text" tabindex="1"></p>

“3”をフォーカスの移動順序に指定
<p><input type="text" tabindex="3"></p>

フォーカスの移動順序を指定しない
<p><input type="text"></p>

“4”をフォーカスの移動順序に指定
<p><input type="text" tabindex="4"></p>

順次ナビゲーションでフォーカスできない
<p><input type="text" tabindex="-1"></p>

“2”をフォーカスの移動順序に指定
<p><input type="text" tabindex="2"></p>

“5”をフォーカスの移動順序に指定
<p><input type="text" tabindex="5"></p>

フォーカスの移動順序を指定しない
<p><input type="text"></p>


表示サンプルはリンク先を参照

フォーカスできる
<p tabindex="0">

夏は夜<br>
月のころはさらなり<br>
やみもなほ、ほたるの多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光りて行くもをかし<br>
雨など降るもをかし<br>

</p>

フォーカスできない
<p>

冬はつとめて<br>
雪の降りたるは、いふべきにもあらず<br>
霜のいと白きも、また　さらでもいと寒きに、火など急ぎおこして、炭もてわたるも、いとつきづきし<br>
昼になりて、ぬるくゆるびもていけば、火桶の火も白き灰がちになりてわろし<br>

</p>

表示サンプルはリンク先を参照