ブートストラップのtabindex =“-1”とは


100

tabindexBootstrap 3 の属性は何ですか?

彼らは実際にすべてのモーダルでそれらを使用していますが、そのドキュメントはそれらについて何も述べていません。

私はそれをその使用に関してのみ見つけました、それは本当にあまり言いません

キーボードおよび支援技術ユーザー向けのアクセス可能なツールチップ

キーボードで操作するユーザー、特に支援技術のユーザーの場合、リンク、フォームコントロール、またはtabindex = "0"属性を持つ任意の要素などのキーボードフォーカス可能な要素にのみツールチップを追加する必要があります。

そして属性がでない場合、モーダルを非表示にするように押すことができないことがesctabindex-1わかりました。

回答:


159

このtabindex属性は、ページ内のフォーカス可能な要素(通常はリンクとフォームコントロール)のナビゲーション順序を明示的に定義します。また、要素をフォーカス可能にするかどうかを定義するためにも使用できます。

[両方] は特別な意味tabindex="0"tabindex="-1"持ち、HTMLで明確な機能を提供します。の値は0、要素をデフォルトのナビゲーション順序で配置する必要があることを示します。これは、ネイティブのフォーカス可能なない要素(例えばでき<div><span>および<p>キーボードフォーカスを受信するために)。もちろん、一般的にはすべてのインタラクティブな要素にリンクとフォームコントロールを使用する必要がありますが、これにより他の要素をフォーカス可能にして相互作用をトリガーできます。

tabindex="-1"値は、デフォルトのナビゲーション・フローから要素を削除する(つまり、ユーザーはそれにタブすることはできません)が、それはそれは、プログラムフォーカスを受け取ることができますフォーカスを意味し、リンクからまたはスクリプトでそれを設定することができます。**これは非常にすることができタブを設定してはならない要素にフォーカスを設定する必要がある場合に便利です

良い例はモーダルダイアログウィンドウです -開いたときにフォーカスがダイアログに設定され、スクリーンリーダーが読み始め、キーボードがダイアログ内を移動し始めます。ダイアログ(おそらく<div>要素のみ)はデフォルトではフォーカスできないため、ダイアログを割り当てるtabindex="-1"と、スクリプトが表示されたときにスクリプトでフォーカスを設定できます。

の値は、-1矢印キーまたはその他のショートカットキーを使用して、ウィジェット内の1つの要素のみがタブキーでナビゲートできることを保証しながら、ウィジェット内の他のコンポーネントにフォーカスを設定できるようにする複雑なウィジェットやメニューでも役立ちます。

出典: http : //webaim.org/techniques/keyboard/tabindex

これがtabindex="-1"モーダル<div>で必要な理由で、ユーザーは一般的なマウスとキーボードのショートカットにアクセスできます。お役に立てば幸いです。


1
この属性はHTMLの一部であり、特にBootstrapとは関係ありません。
Lutz Prechelt 2016

8
はい、それはまさにここで言われていることであり、それは「HTMLの明確な機能」であり、Bootstrapとは関係がないということです。
カイルアンダーソン、

1
JavaScriptで<div>に集中できるようにするには、この要素にtabindex属性を定義する必要があります(tabindex = -1などの値)。divにtabindexが存在しない場合、フォーカスは機能しません。これが、BSがモーダルdivにtabindex = -1を追加する理由です。developer.mozilla.org/en-US/docs/Web/Accessibility/…を参照してください。tabindexが存在しない場合、JSのfocusableは、要素のプラットフォームの規則に従います(フォームコントロール、リンクなどはあります)。つまり、tabindexが存在しない場合、<div>はフォーカス可能ではありません。
Canada Wan

tabindex = "-1"の要素をクリックすることで、要素にフォーカスすることもできます。
ブラックマンサ

13

tabindex属性はHTMLに関連付けられている、それはブートストラップに固有ではありません。

このプロパティは、要素がキーボードナビゲーションで到達可能かどうかを示す役割を果たします。

3つの異なるシナリオに注意する必要があります。

  1. tabindex = "0"要素に追加する場合、これはキーボードナビゲーションから到達可能であることを意味しますが、順序はドキュメントソースの順序によって定義されます。

  2. ときに正の値を加算する(例えばtabindex属性にtabindex = "1", tabindex = "2")これらの要素は、キーボードナビゲーションによって到達可能であり、順序は、属性の値によって定義されます。

  3. ときに負の値を加算する(通常のtabIndexにtabindex="-1")、それは要素があることを意味するキーボードナビゲーションによって到達可能ではないが、JSにフォーカス機能を使用して集束させることができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.