このtabindex
属性は、ページ内のフォーカス可能な要素(通常はリンクとフォームコントロール)のナビゲーション順序を明示的に定義します。また、要素をフォーカス可能にするかどうかを定義するためにも使用できます。
[両方] は特別な意味tabindex="0"
をtabindex="-1"
持ち、HTMLで明確な機能を提供します。の値は0
、要素をデフォルトのナビゲーション順序で配置する必要があることを示します。これは、ネイティブのフォーカス可能なない要素(例えばでき<div>
、<span>
および<p>
キーボードフォーカスを受信するために)。もちろん、一般的にはすべてのインタラクティブな要素にリンクとフォームコントロールを使用する必要がありますが、これにより他の要素をフォーカス可能にして相互作用をトリガーできます。
tabindex="-1"
値は、デフォルトのナビゲーション・フローから要素を削除する(つまり、ユーザーはそれにタブすることはできません)が、それはそれは、プログラムフォーカスを受け取ることができますフォーカスを意味し、リンクからまたはスクリプトでそれを設定することができます。**これは非常にすることができタブを設定してはならない要素にフォーカスを設定する必要がある場合に便利です。
良い例はモーダルダイアログウィンドウです -開いたときにフォーカスがダイアログに設定され、スクリーンリーダーが読み始め、キーボードがダイアログ内を移動し始めます。ダイアログ(おそらく<div>
要素のみ)はデフォルトではフォーカスできないため、ダイアログを割り当てるtabindex="-1"
と、スクリプトが表示されたときにスクリプトでフォーカスを設定できます。
の値は、-1
矢印キーまたはその他のショートカットキーを使用して、ウィジェット内の1つの要素のみがタブキーでナビゲートできることを保証しながら、ウィジェット内の他のコンポーネントにフォーカスを設定できるようにする複雑なウィジェットやメニューでも役立ちます。