tabindexのHTML要素を無視する方法は？

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

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

使用できますtabindex="-1"。

W3C HTML5仕様では、負のサポートtabindex値を：

値が負の整数
の場合、ユーザーエージェントは要素のtabindexフォーカスフラグを設定する必要がありますが、順次フォーカスナビゲーションを使用して要素に到達することはできません。

ただし、これはHTML5の機能であり、古いブラウザでは動作しない可能性があることに注意してください。
であるために（1999年から）W3C HTML 4.01標準に準拠し、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」のようなハックは、Chrome v53では機能しません。

これは、Chromeとほとんどのブラウザで機能します。

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>

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

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