web-dev-qa-db-ja.com

tabindexからHTML要素を無視する方法

HTMLに特定の要素のタブインデックスを許可しないようにブラウザに指示する方法はありますか？

私のページにはjQueryでレンダリングされるサイドショーがありますが、それをタブで表示すると、タブ付きのものはすべて非表示になるため、タブコントロールがページ上の次の表示リンクに移動する前にたくさんのタブが押されますユーザーは視覚的に.

htmltabindex
319
Tom Gullen

tabindex="-1" を使うことができます。

W3C HTML5仕様 は負のtabindex値をサポートします。

値が負の整数の場合
ユーザーエージェントは要素のtabindexフォーカスフラグを設定しなければなりませんが、シーケンシャルフォーカスナビゲーションを使って要素に到達することを許可してはいけません。

ただし、これはHTML 5の機能であり、古いブラウザでは機能しない可能性があります。
W3C HTML 4.01規格（1999年以降） に準拠するためには、tabindexが積極的である必要があります。

下記の純粋なHTMLでの使用例。

<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />
509
Martin Hennings

tabindexがスペックおよびHTMLではすべて小文字であるにもかかわらず、Javascript/DOMのプロパティはtabIndexと呼ばれています。

element.tabindex = -1を呼び出すプログラム的に変更されたタブインデックスが機能していない理由を理解しようとしても、気を失うことはありません。 element.tabIndex = -1を使用してください。

95
Eric Lawler

これらがボタンやアンカーのようにタブ順で自然に要素である場合、tabindex = -1でタブ順からそれらを削除するのは、アクセシビリティの匂いのようなものです。彼らがタブ順序からそれらを削除する重複した機能を提供しているならば大丈夫です、そして補助的な技術がそれらを無視するようにaria-hidden = trueをこれらの要素に追加することを検討してください。

8
Matt

tabindex="-1"をサポートしていないブラウザで作業している場合は、スキップする必要があるものを渡すだけで済むかもしれません本当に高いタブインデックス。例えばtabindex="500"は基本的にオブジェクトのタブ順序をページの終わりに移動します。

ボタンを中央に配置した長いデータ入力フォームに対してこれを行いました。それは人々が非常に頻繁にクリックするボタンではないので、私は彼らが誤ってそれにタブで移動してエンターを押すことを望まなかった。 disabledはボタンなので動作しません。

6
Jemmeh

"tabIndex = -1"のようなハックはChrome v53ではうまくいきません。

これはクロム、そしてほとんどのブラウザで動作します。

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>
5
Val

属性disabledを要素に追加するだけです（またはjQueryを使用してそれを行います）。無効にすると、入力がフォーカスされたり選択されたりしなくなります。

2
Yaakov Ainspan

これを行う方法はtabindex="-1"を追加することです。これを特定の要素に追加すると、キーボードナビゲーションで到達不能になります。 tabindexあなたがさらに理解するのに役立つ素晴らしい記事 こちら があります。

0
Nesha Zoric