2015-10-02 6 views
42

ブートストラップ3のtabindex属性は何ですか?ブートストラップのtabindex = " - 1"とは何ですか

実際にはすべてのモーダルで使用されていますが、そのドキュメントでは何も言われていません。

私は本当に多く

アクセス可能なキーボードや支援技術のユーザーがキーボードでナビゲートするユーザーの場合

ためのツールチップ、およびに言わない、その使用に関する本を見つけました

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

そして、私はI can't press esc to hide a modal if the tabindex attribute is not -1を見つけました。

答えて

60

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

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

tabindex="-1"は、デフォルトのナビゲーション・フロー(つまり、ユーザーはそれにタブすることはできません)から要素を削除しますが、それはフォーカスがリンクから、それに設定することができることを意味し、それは、プログラムの焦点を受け取ることができますか**これは非常ににすることができますが、タブするべきではない要素に便利ですが、フォーカスをに設定する必要があるかもしれません。開いたときに、スクリーンリーダーがを読み取るを開始するようにフォーカスがダイアログに設定されるべきであり、キーボードダイアログ内をナビゲートを開始する -

良い例はモーダルダイアログウィンドウあります。ダイアログ(たぶん<div>要素)はデフォルトでフォーカス可能ではないので、tabindex="-1"に割り当てると、スクリプトが提示されたときにフォーカスが設定されます。

-1の値はまた、複雑なウィジェットおよびウィジェット内の唯一の要素は、Tabキーでナビゲート可能であることを保証するために矢印キーまたは他のショートカットキーを利用するメニューに有用であるが、それでもフォーカスを設定することを可能にすることができますウィジェット内の他のコンポーネントに

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

ユーザーが共通のマウスとキーボードのショートカットにアクセスできるようにあなたは、モーダル<div>tabindex="-1"を必要とする理由です。希望が役立ちます。

+0

この属性はHTMLの一部であり、特にブートストラップとは関係ありません。 –

+5

はい、これはまさにここで言われていることです。それはブートストラップとは関係のない「HTMLの明確な機能」です。 –

関連する問題