【HTML Living Standard】tabindex属性の使い方
tabindex属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
tabindexプロパティは、HTML要素がキーボードナビゲーションにおいてフォーカスを受けられるかどうか、およびそのフォーカス順序を制御するためのグローバル属性であるプロパティです。このプロパティは、キーボードのみでウェブページを操作するユーザー、特にアクセシビリティを考慮する上で非常に重要です。
tabindexには整数値を設定します。値が負の値（例: -1）の場合、その要素はタブキーによるナビゲーションからは除外されますが、JavaScriptなどのプログラムからフォーカスを設定することは可能です。これは、視覚的には存在するが、通常のタブ順序ではスキップしたい要素に利用されます。
値が 0 の場合、その要素はタブキーでのナビゲーション順序に含まれます。このときのフォーカス順序は、HTMLドキュメント内での要素の出現順序に従います。通常、ボタンやリンクなどのインタラクティブな要素は自動的にフォーカス可能ですが、div や span などの非インタラクティブな要素にプログラムでフォーカスを当てたい場合に tabindex="0" を設定します。
値が正の値（例: 1 以上）の場合、その要素はタブキーでのナビゲーション順序に含まれ、tabindexの値が小さい要素から順にフォーカスされます。同じ値を持つ複数の要素がある場合、それらの要素間ではドキュメント内での出現順序が適用されます。この機能は、特定の要素に優先的にフォーカスさせたい場合に利用できますが、通常の順序を乱す可能性があるため、慎重な利用が推奨されます。
tabindexプロパティを適切に使用することで、キーボード操作のみでウェブサイトを利用するユーザーの利便性が大幅に向上し、ウェブコンテンツ全体のアクセシビリティが向上します。
構文(syntax)
1<button tabindex="0">Example Button</button>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML tabindex属性でフォーカス操作を制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tabindex属性のサンプル</title> 7 <style> 8 /* フォーカスされた要素の視認性を高めるためのスタイル */ 9 *:focus { 10 outline: 2px solid blue; 11 background-color: #e0f2f7; 12 } 13 div { 14 margin: 10px 0; 15 padding: 10px; 16 border: 1px solid #ccc; 17 } 18 button, a, input { 19 margin: 5px 0; 20 display: block; 21 } 22 </style> 23</head> 24<body> 25 <p>Tabキーを押して、要素間のフォーカス移動を確認してください。</p> 26 27 <!-- デフォルトでフォーカス可能な要素 --> 28 <a href="#">リンク要素 (デフォルトでフォーカス可能)</a> 29 <button type="button">ボタン要素 (デフォルトでフォーカス可能)</button> 30 <input type="text" placeholder="テキスト入力 (デフォルトでフォーカス可能)"> 31 32 <h2>tabindex="0" の例</h2> 33 <!-- 通常フォーカスできない要素をタブ順序に含める --> 34 <div tabindex="0"> 35 この DIV 要素は <code>tabindex="0"</code> が設定されているため、Tabキーでフォーカス可能です。 36 </div> 37 38 <h2>tabindex="-1" の例</h2> 39 <!-- 通常フォーカス可能な要素をタブ順序から除外する --> 40 <button type="button" tabindex="-1"> 41 このボタンは <code>tabindex="-1"</code> が設定されているため、Tabキーではスキップされます。 42 （JavaScriptなどでプログラム的にフォーカスを当てることは可能です） 43 </button> 44</body> 45</html>
tabindex属性は、HTML要素がキーボードのTabキーでフォーカス可能であるかどうか、またそのフォーカス順序を制御するためのグローバル属性です。これは、キーボード操作でWebサイトを利用するユーザー（特にアクセシビリティを必要とする方々）にとって非常に重要です。この属性には引数や戻り値はありません。
サンプルコードでは、主に二つのtabindexの値が示されています。
まず、tabindex="0"を設定すると、通常はTabキーでフォーカスできない要素（例えば、単なる<div>要素など）もフォーカス可能になります。これにより、キーボード操作でそれらの要素にアクセスできるようになります。この場合、フォーカス順序はHTML文書内での要素の出現順序に従います。
次に、tabindex="-1"を設定すると、通常はTabキーでフォーカス可能な要素（例えば、ボタンやリンクなど）であっても、Tabキーでのフォーカス順序からは除外されます。つまり、Tabキーを押してもその要素はスキップされます。ただし、JavaScriptなどのプログラムを使って、明示的にこの要素にフォーカスを当てることは可能です。
このようにtabindex属性を使用することで、Webページのキーボードナビゲーションをより柔軟に、そしてユーザーにとって使いやすく調整することができます。
tabindexは、キーボード操作による要素へのフォーカス順序を制御する重要なグローバル属性です。tabindex="0"を設定すると、本来Tabキーでフォーカスできない要素もドキュメントの出現順に沿ってフォーカス可能になります。一方、tabindex="-1"は、本来フォーカス可能な要素をTabキーによる順序から除外しますが、JavaScriptなどのプログラムからはフォーカスを当てられます。アクセシビリティを損なわないため、正の整数値（例：tabindex="1"）の使用は極力避け、HTMLの自然な要素配置順序を尊重してください。不適切な使用は、キーボード操作を主とするユーザーの利便性を著しく低下させる可能性があるため、実装後は必ずキーボードでの動作を確認しましょう。
HTML tabindex 効かないときの動作例
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>tabindex 属性の動作確認</title> 7 <style> 8 /* フォーカスされた要素を視覚的に強調するためのスタイル */ 9 *:focus { 10 outline: 2px solid blue; 11 outline-offset: 2px; 12 } 13 div, p, button, a { 14 margin: 10px; 15 padding: 10px; 16 border: 1px solid #ccc; 17 display: inline-block; /* インライン要素のように横並びにする */ 18 } 19 </style> 20</head> 21<body> 22 <h1>tabindex 属性の動作確認</h1> 23 <p>キーボードの「Tab」キーを押して、要素間のフォーカス移動を確認してください。</p> 24 <p>「tabindexが効かない」と感じる場合の動作例を含みます。</p> 25 26 <h2>デフォルトでフォーカス可能な要素</h2> 27 <!-- button要素はデフォルトでフォーカス可能です。 --> 28 <button>ボタン (tabindexなし)</button> 29 <!-- tabindex="0": デフォルトのキーボードナビゲーション順序に含めます。 30 元々フォーカス可能な要素なので、設定しても動作は変わりません。 --> 31 <button tabindex="0">ボタン (tabindex="0")</button> 32 <!-- tabindex="-1": キーボードナビゲーションから除外します。 33 タブキーではフォーカスされなくなりますが、JavaScriptなどからプログラム的にフォーカスできます。 34 これが「tabindexが効かない」と感じられる一因かもしれません。 --> 35 <button tabindex="-1">ボタン (tabindex="-1", タブでフォーカス不可)</button> 36 <a href="#link" role="button">リンク (tabindexなし)</a> 37 <a href="#link" role="button" tabindex="0">リンク (tabindex="0")</a> 38 <a href="#link" role="button" tabindex="-1">リンク (tabindex="-1", タブでフォーカス不可)</a> 39 40 <h2>デフォルトでフォーカスできない要素</h2> 41 <!-- div要素はデフォルトでフォーカスできません。 --> 42 <div>DIV要素 (tabindexなし, タブでフォーカス不可)</div> 43 <!-- tabindex="0": デフォルトでフォーカスできない要素をキーボードナビゲーションに含めます。 44 この設定により、タブキーでフォーカスできるようになります。 --> 45 <div tabindex="0">DIV要素 (tabindex="0", タブでフォーカス可能)</div> 46 <!-- tabindex="-1": デフォルトでフォーカスできない要素に設定しても、キーボードナビゲーションからは除外されます。 --> 47 <div tabindex="-1">DIV要素 (tabindex="-1", タブでフォーカス不可)</div> 48 49 <h2>tabindex の順序指定 (推奨されない利用法)</h2> 50 <p>tabindexに正の整数を指定すると、その値が小さい順にフォーカスされます。しかし、HTMLの自然な順序を乱すため、アクセシビリティの観点から推奨されません。</p> 51 <!-- 自然な順序より先にフォーカスされます。小さい値から順にフォーカスされます。 --> 52 <button tabindex="3">ボタン 3</button> 53 <button tabindex="1">ボタン 1</button> 54 <button tabindex="2">ボタン 2</button> 55 <!-- tabindex="0" は、正の整数の要素の後に、自然な順序でフォーカスされます。 --> 56 <button tabindex="0">ボタン 0 (自然な順序)</button> 57 <!-- tabindexなしの要素は、tabindex="0" の要素の後に、自然な順序でフォーカスされます。 --> 58 <button>ボタン (tabindexなし, 自然な順序)</button> 59 60 <p>↑上記の要素をタブキーで順に移動すると、1 → 2 → 3 → 0 → (tabindexなし) の順にフォーカスされることが確認できます。</p> 61</body> 62</html>
HTMLのtabindex属性は、キーボードのTabキーを使ってWebページの要素間を移動する際のフォーカス順序を制御するグローバル属性です。この属性には引数がなく、属性値に指定する整数によってその挙動が変わります。
tabindex="0"を設定すると、元々キーボードでフォーカス可能な要素（ボタンやリンクなど）は、HTMLに記述された自然な順序でフォーカスされます。また、通常はフォーカスできない要素（divやpなど）にtabindex="0"を設定すると、Tabキーでフォーカスできるようになります。
tabindex="-1"を設定した要素は、キーボードのTabキーによるフォーカス順序から完全に除外されます。そのため、Tabキーを押してもその要素は選択されません。これが「tabindexが効かない」と感じられる主な理由の一つですが、JavaScriptなどのプログラムからはこの要素に強制的にフォーカスを当てることが可能です。
tabindexに正の整数（例: tabindex="1", tabindex="2"）を指定すると、その値が小さい順に要素がフォーカスされます。これにより、HTMLの自然なドキュメント順序とは異なる順番でフォーカス移動を強制できます。しかし、この方法はアクセシビリティの観点からユーザー体験を損なう可能性があるため、特別な事情がない限りは推奨されません。
tabindexを何も指定しない場合、ボタンやリンクのように元々フォーカス可能な要素は自然な順序でフォーカスされますが、divやpのように元々フォーカスできない要素は、Tabキーではフォーカスされません。tabindex属性は、キーボードでの操作性を向上させ、すべてのユーザーがWebページを快適に利用できるよう、アクセシビリティを高める上で重要な役割を果たします。
tabindex属性は、キーボードのタブキーによる要素間のフォーカス移動順序を制御します。tabindex="0"は、通常フォーカスできないdivなどの要素をタブ移動の対象にしたり、デフォルトの順序でフォーカスさせたい場合に利用します。一方、tabindex="-1"を設定すると、その要素はタブキーでのフォーカス移動から除外されます。そのため、タブでフォーカスされない場合に「効かない」と感じることがありますが、JavaScriptなどからプログラム的にフォーカスすることは可能です。
また、tabindexに正の整数を設定すると、その値が小さい順にフォーカスされますが、HTMLの自然な順序を乱し、アクセシビリティを損ねるため強く非推奨です。極力避け、HTMLの記述順でフォーカス順序を制御することを心がけてください。