tabindex（HTML属性）

説明

Tabindexは、ユーザーがTABキーを使用してページをナビゲートするときに従うシーケンスを定義するために使用されます。デフォルトでは、ナチュラルタブの順序は、マークアップのソース順序と一致します。特定の状況では、デフォルトのタブの順序をオーバーライドする必要がある場合がありますが、ページを論理フローで作成し、ブラウザにデフォルトの順序で動作させることを強くお勧めします。これは、Tabindex属性の必要性を無効にするアプローチです。 Tabindexは0から開始し、任意の値で増分できます。そのため、10、20、30、40、50と同様に、シーケンス1、2、3、4、5は問題ありません。Tabindexを導入する必要がある場合は、間隔を含むシーケンスを使用することをお勧めします（ 2番目の例が提供されます）、これにより、ページ上のすべてのTabindex値を再インドすることなく（たとえば、10、15、20など）、後で他のコントロールを注入する機会が与えられます。特定のTabindex値を複数の要素に適用する必要があります（たとえば、Tabindexが与えられた1つのセクションのすべてのリンク 「1」、および「2」のTabindexが与えられたサイドバーリンクの場合、これらの影響を受ける要素のタブ順序は、ソースマークアップ順序に従って行われます。多くの人々は、5、10、15などの定義された間隔を持つシーケンスではなく、このアプローチを使用することを選択します。 「-1」のtabindexが使用されている場合、適用される要素はキーボードに焦点を合わせなくなります。 Tabindexがページのどこにでも設定されている場合（100番目のリンクやフォームコントロールであっても、タブの順序が最低のタブインデックス値の要素で開始され、増分を実行します。その場合にのみ、Tabindexが設定されていない残りの要素をタブの順序で取ります。そのため、Tabindexを追加することでページ全体の使いやすさに害を及ぼさないようにするには、細心の注意を払わなければなりません。 無効属性がtabindexを持つ要素に設定されている場合、そのtabindex 無視されます。

例

tabindexは、以下のリンクの「3」に設定されています：

<p>You can try our <a href="cakes.html" <em>tabindex="3"</em>>lovely
     range of cakes</a>.</p>

値

この属性は、任意の数値を取ることができます。

Tabindex HTML属性

に関するよくある質問

HTMLのTabindex属性の目的は何ですか？

HTMLのTabIndex属性は、キーボードを使用してユーザーがWebページをナビゲートするときに要素を受信する順序を指定するために使用されます。この属性は、キーボードナビゲーションに依存しているユーザーが論理的かつ直感的な順序でページと対話できるようにするため、Webページのアクセシビリティを改善するのに特に便利です。html要素でtabindex属性を使用できますか？リンク、フォーム入力、ボタンなどのインタラクティブな要素で最も一般的に使用されています。非対話要素にTabindex属性を使用すると、ユーザーにとって混乱するナビゲーションエクスペリエンスにつながる可能性があるため、一般的にそうすることを避けることをお勧めします。

要素のtabindex値を指定しない場合、ブラウザはHTMLドキュメントの要素の位置に基づいてナビゲーション順序を決定します。ドキュメントの早い段階で来る要素は、後で来る要素の前にフォーカスを受け取ります。 Tabindex値が-1の要素は、プログラムで（たとえば、JavaScriptを介して）フォーカスを受信できますが、デフォルトのキーボードナビゲーション順序から除外されます。 ？

Tabindex属性を使用して、Webページ上のすべてのインタラクティブな要素にキーボードを使用して操作して操作できるようにすることで、アクセシビリティを向上させることができます。これは、これらのテクノロジーがキーボードナビゲーションに依存することが多いため、支援技術に依存しているユーザーにとって特に重要です。

tabindex属性を使用する際に避けるべき一般的な間違いは何ですか？ Tabindex属性を使用する場合は、正の値を不必要に使用し、非対話要素に属性を使用すること、インタラクティブ要素のTabindex値の指定に失敗することを避けてください。これらの間違いは、ユーザーにとって混乱またはアクセスできないナビゲーションエクスペリエンスにつながる可能性があります。方法。たとえば、要素にTabindex値があり、無効になっている場合（無効属性を使用）、要素はキーボードナビゲーション順序から除外されます。

はい、JavaScriptを使用してtabindex属性を使用できます。たとえば、JavaScriptを使用して、要素のTabindex値を動的に変更したり、特定のTabindex値を持つ要素にプログラム的に焦点を当てることができます。

Tabindexの実装の有効性をテストするにはどうすればよいですか？

キーボードのみを使用してWebページをナビゲートすることにより、Tabindex実装の有効性をテストできます。すべてのインタラクティブな要素に論理的な順序で到達して操作できる場合、Tabindexの実装が効果的である可能性があります。

以上がtabindex（HTML属性）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。