web-dev-qa-db-ja.com

Tabキーを使用してナビゲートするときに、一部のWebサイト要素を無視できますか？

本当に質問として。キーボードのタブキーを使用してナビゲートするときに無視したい入力ボックスがページにあります。

私はこの入力ボックスを単純なボットハニートラップとして使用し、ページの外に配置しているため、Tabキーを使用しているとき、ユーザーはこの要素にタブで移動したときに何もフォーカスがないように見えます。

htmlcssaccessibilitytabindex
35
thor

この要素にtabindex="-1"を設定して、タブ順で無視されるようにすることができます。 0は、ブラウザにタブの順序を独自に把握するように指示し、-1は、ブラウザにそれを無視するように指示します。

58
Nick Craver

tabindex属性を使用して、タブキーが要素を循環する順序を定義できます。 tabindex="-1"を設定すると、要素はスキップされます。

詳細については、こちらをご覧ください http://www.webcheatsheet.com/HTML/controll_tab_order.php たとえば。

[〜＃〜] update [〜＃〜]コメントに基づいてtabindex = "0"を "-1"に変更

13
michal kralik

display: none代わりに。

1
Quentin

私の場合、ユーザー入力が必要ないため、入力要素に回避策disabledフラグを使用しました:)

3つの入力の例：

.container {
  display: flex;
  flex-direction: column;
}
input {
  width: 200px;
  margin-bottom: 10px;
}
<div class="container">
  <input placeholder="Not disabled"/>
  <input placeholder="Disabled - skipped by tab" disabled/>
  <input placeholder="Not disabled"/> 
</div>

それが<3-Chrome、Edge、Firefox、そして「疑似」ブラウザIEテスト済み）の誰かにとってうまく機能することを願っています。

0
Hourglasser