[解決済み] bootstrapのtabindex="-1 "は何のためにあるのか？

質問

は何ですか？ tabindex 属性は何のためにあるのでしょうか？

実質的にすべてのモーダルで使用されていますが、ドキュメントには何も書かれていません。

私はその使用に関してこれしか見つけられませんでしたが、実際にはあまり多くを語っていません。

キーボードおよび支援技術ユーザーのためのアクセシブルなツールチップ

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

そして、私が見つけたのは を押せません。 esc を押すとモーダルが非表示になるのですが、もし tabindex 属性が -1 .

• を押した後に閉じるモーダル esc キー (タブインデックス付き)
• を押した後、モーダルが閉じない esc キー (タブインデックスなし)

どのように解決するのですか？

その tabindex 属性は、ページ内のフォーカス可能な要素（典型的にはリンクとフォーム・コントロール）のためのナビゲーション順序を明示的に定義します。また、要素がフォーカスされるべきかどうかを定義するために使われることもあります。

両方 tabindex="0" と tabindex="-1" は特別な意味を持ち、HTMLの中で異なる機能を提供します。ある値が 0 の値は、その要素がデフォルトのナビゲーション順序に配置されることを示します。これにより、ネイティブにフォーカスできない要素（例えば <div> , <span> そして <p> ) でキーボードフォーカスを受けることができます。もちろん、一般的にはすべてのインタラクティブな要素にリンクとフォームコントロールを使用すべきですが、これによって他の要素にフォーカスが当たり、インタラクションを引き起こすことができるようになります。

A tabindex="-1" 値 は、デフォルトのナビゲーションフローから要素を削除します。 (すなわち、ユーザはそこにタブで移動できない) が、それは はプログラムによるフォーカスを受け取ることを許可します。 つまり、リンクから、またはスクリプトでフォーカスを設定することができます。 これは、タブでアクセスされるべきではないが、フォーカスを設定する必要があるような要素に非常に便利です。 .

良い例としては モーダルダイアログウィンドウ - が開かれたとき、フォーカスがダイアログに設定され、スクリーンリーダーが 読み上げ を、キーボードは ナビゲート を開始します。なぜなら、ダイアログは（おそらく単なる <div> 要素) はデフォルトではフォーカス可能ではないので、それを tabindex="-1" を割り当てることで、提示されたときにスクリプトでフォーカスを設定することができます。

の値は -1 の値は、矢印キーやメニューキーを利用する複雑なウィジェットやメニューにおいて有用です。 その他のショートカットキー を利用して、ウィジェット内の 1 つの要素だけがタブキーで移動できるようにしつつ、ウィジェット内の他の要素にフォーカスを設定できるようにすることもできます。

ソース http://webaim.org/techniques/keyboard/tabindex

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