如何忽略tabindex中的HTML元素？

Question

HTML中是否有任何方法告诉浏览器不允许对特定元素进行选项卡索引？

在我的页面上虽然有一个使用jQuery呈现的sideshow,但是当你选中它时,你会在标签控件移动到页面上的下一个可见链接之前获得大量的标签按下,因为所有被标记的内容都被隐藏到用户视觉上.

Answer 1

你可以用tabindex="-1".

的W3C HTML5规范支持负tabindex的值:

如果值为负整数
用户代理必须设置元素的tabindex焦点标志,但不应允许使用顺序焦点导航到达元素.

请注意,这是HTML5功能,可能无法与旧浏览器一起使用.
要符合W3C HTML 4.01标准(从1999年开始),tabindex需要是积极的.

纯HTML中的示例用法如下.

<input />
<input tabIndex="-1" placeholder="NoTabIndex" />
<input />

Answer 2

不要忘记,即使tabindex在规范和HTML中都是小写,在Javascript/DOM中调用属性tabIndex.

不要试图弄清楚为什么你的程序化改变标签索引调用element.tabindex = -1不起作用.使用element.tabIndex = -1.

Answer 3

如果这些元素在按钮和锚点之类的Tab键顺序中是自然的,那么使用tabindex = -1从Tab键顺序中删除它们就是一种可访问性气味.如果他们提供重复功能,从Tab键顺序中删除它们就可以了,并考虑在这些元素中添加aria-hidden = true,这样辅助技术就会忽略它们.

Answer 4

如果您在不支持的浏览器中工作 tabindex="-1"，只需给那些需要跳过的事情设置一个很高的标签索引，或许就能摆脱困境。例如，tabindex="500"基本上将对象的选项卡顺序移动到页面的末尾。

我这样做是为了获得一个较长的数据输入表单，并在其中插入了一个按钮。这不是人们经常点击的按钮，所以我不希望他们无意间跳到该按钮并按Enter。disabled因为它是一个按钮，所以不起作用。

Answer 5

只需将属性添加disabled到元素（或使用 jQuery 为您完成）。禁用会阻止输入被聚焦或选择。

Answer 6

像“ tabIndex = -1”这样的hack不适用于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>

Answer 7

做到这一点的方法是添加tabindex="-1". 通过将其添加到特定元素，键盘导航将无法访问该元素。这里有一篇很棒的文章将帮助您进一步了解tabindex。