web-dev-qa-db-ja.com

bootstrapのtabindex = "-1"とは何ですか

Bootstrap 3のtabindex属性は何のためですか？

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

私はその使用に関してこれを見つけましたが、実際にはあまり言いません

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

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

そして esc属性が-1でない場合、tabindexを押してモーダルを非表示にすることはできません 。

twitter-bootstraptwitter-bootstrap-3bootstrap-modal
74
Alvaro

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>が必要な理由です。そのため、ユーザーは一般的なマウスとキーボードショートカットにアクセスできます。お役に立てば幸いです。

119
Kyle Anderson

tabindex 属性HTMLに関連付けられている、Bootstrapに固有ではありません。

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

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

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

  2. 正の値を追加する tabindex属性（たとえばtabindex = "1", tabindex = "2"）にそれらの要素がキーボードナビゲーションと順序で到達できる場合属性の値によって定義されます。

  3. 負の値を追加するがtabindex（通常tabindex="-1"）の場合、要素はキーボードナビゲーションでは到達できませんが、JSのフォーカス機能を使用してフォーカスできます

6
Nesha Zoric