HTML tabindex属性とは何ですか？

tabindexHTMLで使用される属性は何ですか？

tabindex2つのことに責任を持つグローバル属性です。

1. 「フォーカス可能な」要素の順序を設定し、
2. それは要素が「フォーカス可能」になり。

私の考えでは、2番目のものは最初のものよりもさらに重要です。デフォルトでフォーカスできる要素はほとんどありません（<a>やフォームコントロールなど）。開発者は、フォーカスできない要素（<div>、<span>など）にいくつかのJavaScriptイベントハンドラー（ 'onclick'など）を追加することが多く、インターフェイスをマウスイベントだけでなくキーボードイベントにも応答させる方法（例えば 'onkeypress'）は、そのような要素をフォーカス可能にすることです。最後に、順序を設定したくないがtabindex="0"、そのようなすべての要素で要素をフォーカス可能に使用する場合：

<div tabindex="0"></div>

また、タブキーでフォーカスしたくない場合は、を使用しますtabindex="-1"。たとえば、タブキーを使用してトラバースする場合、下のリンクはフォーカスされません。

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

ユーザーがタブボタンを押すと、次の例に示すように、1、2、3の順序でフォームが表示されます。

例えば：

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

の tabindexユーザーがTabキーを使用してページをナビゲートするときにたどるシーケンスを定義するために使用されます。デフォルトでは、自然なタブ順序はマークアップのソース順序と一致します。

tabindexコンテンツ属性を使用すると、作成者は、要素がフォーカス可能であるかどうか、順次フォーカスナビゲーションを使用して到達可能であるかどうか、および順次フォーカスナビゲーションの目的での要素の相対順序を制御できます。「タブインデックス」という名前は、フォーカス可能な要素間を移動するための「タブ」キーの一般的な使用に由来しています。「タブ移動」という用語は、順次フォーカスナビゲーションを使用して到達できるフォーカス可能な要素を前方に移動することを指します。
W3Cの推奨事項：HTML5
セクション7.4.1順次フォーカスナビゲーションとtabindex属性

tabindex0で開始または任意の正の整数と上向きにインクリメント。古いバージョンのMozillaとIEでは、tabindexが1から始まり、2に進み、2の後にのみ0になり、3になるので、値0は避けられるのが一般的tabindexです32767。最大整数値はです。要素が同じtabindex場合、tabindexはマークアップのソースの順序と一致します。負の値はタブインデックスから要素を削除するため、フォーカスされることはありません。

要素が割り当てられている場合tabindexの-1その要素を削除し、それがフォーカス可能になることはありませんが、フォーカスは、プログラムで使用して要素に与えることができますelement.focus()。

tabindex値のない属性または空の値を指定した場合、属性は無視されます。

場合はdisabled属性が持つ要素に設定されtabindex、要素は無視されます。

場合tabindexにかかわらず、それは、コードの残りの部分との関係である場合のページ内の集合の任意の場所で定義されている場合（これはフッタ、コンテンツ領域、史上でもよい）tabindex、タブ順序は要素から開始されますが、tabindex0を超える最低値が明示的に割り当てられます。次に、定義された要素を循環し、明示的なtabindex要素がタブで移動された後にのみ、ドキュメントの最初に戻り、自然なタブ順序に従います。

HTML4仕様では、次の要素のみがtabindex属性をサポートしています。 アンカー、 範囲、 ボタン、 入力、 オブジェクト、 選択する、および テキストエリア。ただし、アクセシビリティを考慮したHTML5仕様では、すべての要素を割り当てることができますtabindex。

-

例えば

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

と同じです

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

すべてが割り当てられているという事実に関係なくtabindex="1"、それらは同じ順序に従います。最初のものが最初で、最後のものが最後です。これも同じです。

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

デフォルトの動作の場合、tabIndexを明示的に定義する必要がないためです。divデフォルトでは、フォーカス可能になりませんanchorタグがします。

tabページ内のタブ移動（キーを押してフォーカスを移動する）の順序を制御する。

リファレンス：http : //www.w3.org/TR/html401/interact/forms.html#h-17.11.1

設定した値によって、キーボードフォーカスがWebサイトの要素間を移動する順序が決まります。

次の例では、最初にタブを押すと、カーソルが#foo、次に#awesome、次に#barに移動します。

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

タブインデックスをどこにも定義していない場合、キーボードフォーカスは、HTMLドキュメントで定義されている順序で、ページのHTMLタグに従います。

tabindexesを指定した回数よりも多くタブを押すと、フォーカスはtabindexesがなかったかのように、つまりHTMLタグの出現順に移動します

デフォルトのフォーム要素のフォーカスナビゲーションシーケンスを変更するために使用できます。

だからあなたが持っているなら：

text input A

text input B

submit button C

タブキーを使用して、A-> B-> Cに移動します。Tabindexを使用すると、そのフローを変更できます。

通常、ユーザーがフォームのフィールド間をタブで移動するとき（タブ移動を許可するブラウザーでは、すべてのブラウザーがそうするわけではありません）、順序はHTMLコードにフィールドが表示される順序です。

ただし、タブオーダーのフローが少し異なる場合があります。その場合、TABINDEXを使用してフィールドに番号を付けることができます。その後、タブは、TABINDEXの低いものから高いものの順に流れます。

この詳細については、こちらのw3を参照してください。

別の良いイラストがここにあります

簡単な言葉でtabindexは、要素に焦点を当てるために使用されます。構文：tabindex="numeric_value" これnumeric_valueは要素の重みです。低い値が最初にアクセスされます。

HTML tabindex属性は、要素がキーボードナビゲーションで到達可能かどうかを示す責任があります。ユーザーがTabキーを押すと、フォーカスが要素間で移動します。tabindex属性を使用することにより、タブ順序フローがシフトされます。

コントロール間のタブ移動は、通常、HTMLコードに表示されるときに順次発生します。

tabindexを使用すると、tabbingは、tabindexが最も小さいコントロールから、tabindexが最も高いコントロールに、tabindexの順に流れます