特定の要素でタブのインデックス作成を許可しないようにブラウザに指示する方法はHTMLにありますか?
私のページにはjQueryでレンダリングされるサイドショーがありますが、それをタブで移動すると、タブが表示されているすべてのものが非表示になっているため、タブコントロールがページ上の次の表示リンクに移動する前に多くのタブが押されますユーザーを視覚的に。
を使用できますtabindex="-1"
。
W3C HTML5仕様は、負のtabindex
値をサポートしています。
値が負の整数
の場合ユーザーエージェントは、要素のtabindexフォーカスフラグを設定する必要がありますが、シーケンシャルフォーカスナビゲーションを使用して要素に到達することを許可しないでください。
ただし、これはHTML5機能であり、古いブラウザでは機能しない可能性があることに注意してください。W3C HTML 4.01標準(1999年以降)
に準拠
するには、tabindexが正である必要があります。
以下の純粋なHTMLでの使用例。
<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
tabindex
仕様とHTMLではすべて小文字ですが、Javascript /DOMではそのプロパティが呼び出されることを忘れないでくださいtabIndex
。
プログラムで変更されたタブインデックスの呼び出しが機能しない理由を理解しようとすることを忘れないでくださいelement.tabindex = -1
。を使用しelement.tabIndex = -1
ます。
これらがボタンやアンカーのようにタブ順序で自然に要素である場合、それらをタブ順序から削除することは、tabindex="-1"
一種のアクセシビリティの匂いです。それらが重複する機能を提供している場合は、タブの順序からそれらを削除しても問題ありませんaria-hidden="true"
。支援技術がそれらを無視するように、これらの要素に追加することを検討してください。
をサポートしていないブラウザで作業している場合は、 スキップする必要のあるものを非常に高いタブインデックスtabindex="-1"
に指定するだけで解決できる場合があります。たとえば、基本的にオブジェクトのタブ順序をページの最後に移動します。tabindex="500"
これは、中央にボタンが表示された長いデータ入力フォームに対して行いました。人々が頻繁にクリックするボタンではないので、誤ってタブで押してEnterキーを押してほしくありませんでした。disabled
ボタンなので動作しません。
これを行う方法は、を追加することtabindex="-1"
です。これを特定の要素に追加すると、キーボードナビゲーションでは到達できなくなります。tabindexをさらに理解するのに役立つ素晴らしい記事がここにあります。
要素に属性disabled
を追加するだけです(またはjQueryを使用して追加します)。無効にすると、入力のフォーカスや選択がまったくできなくなります。