使用 Tab 键导航时可以忽略某些网站元素吗？答案

【问题标题】：Can I ignore some website element when navigating using the tab key?使用 Tab 键导航时可以忽略某些网站元素吗？
【发布时间】：2019-02-26 03:56:55
【问题描述】：

真的是个问题。我的页面上有一个输入框，我想在使用键盘 Tab 键导航时忽略它。

我将此输入框用作一个简单的机器人蜜罐并将其定位在页面之外，因此在使用 tab 键的那一刻，它看起来对用户来说，当他们使用 tab 到这个元素时好像没有任何焦点。

【问题讨论】：

不要将其放置在页面之外，而是将其放在看起来正常的位置并用另一个元素覆盖它。
@Rex — 实现了……什么？它仍将按 Tab 键顺序排列。
@David 并设置 tabindex。

标签： html css accessibility tabindex

【解决方案1】：

您可以在此元素上设置tabindex="-1"，以便在 Tab 键顺序中忽略它。 0 告诉浏览器自己找出 Tab 键顺序，-1 告诉浏览器忽略它。

【讨论】：

【解决方案2】：

您可以使用tabindex 属性来定义tab 键在元素之间循环的顺序。如果您设置tabindex="-1"，该元素将被跳过。

更多信息可以在这里http://www.webcheatsheet.com/HTML/controll_tab_order.php获得例如。

更新根据 cmets 将 tabindex="0" 更改为 "-1"

【讨论】：

不过，这只是解决方案的一部分——焦点将在某个时候最终落在元素上，就在稍后。
Tabindex=0 使元素使用正常约定进行索引 - w3.org/TR/html5/editing.html#negative-tabindex - 它用于将通常不可聚焦的元素添加到正常序列中，而不是排除它们。
+1 tabindex='-1' 确实似乎完全可以工作（输入元素从旋转中出来）。用JS方法删除我的答案。
将 tabindex 设置为 -1 效果很好 - 感谢所有回复和建议。
我无法让 tabindex='-1' 使用 display:none 元素。

【解决方案3】：

display: none它。

【讨论】：

没错，但更高级的机器人可能会检查这一点。（因为他们可能会将其定位在页面之外，但这是真正的高级）。
也就是说，假设是可能的。 OTOH，如果您将其移出屏幕，那么屏幕阅读器会将其呈现给真实用户。
我确实考虑过将显示设置为无，但我担心机器人会发现这比在页面外定位更容易检查，正如 Konerak 所说。我已经用一些屏幕阅读软件对其进行了测试，并注意到它显示为一个未标记的文本输入框。这显然是一个问题，但我认为我们将不得不暂时忍受这个问题，然后再看看它。

【解决方案4】：

我在输入元素上使用了解决方法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>

希望它适用于某人

【讨论】：