哪些 HTML 元素即使使用 tabindex 也不能 tabbable？答案

【问题标题】：What HTML elements are not tabbable even with tabindex?哪些 HTML 元素即使使用 tabindex 也不能 tabbable？
【发布时间】：2012-12-19 01:20:41
【问题描述】：

是否有人列出了不可可选项卡的 HTML (HTML5) 元素列表，即使指定了选项卡索引也是如此？（tabbable是指他们可以通过反复按“tab”键获得焦点。）

我们知道有些元素默认是可选项卡的，例如input 或textarea。我们还知道，有些元素只有在显式指定 tabindex 时才能 tabbable，例如 div 和 span 元素。

根据 W3Schools，“在 HTML5 中，tabindex 属性可用于任何 HTML 元素”。但是，肯定有一些元素是不可标签的，即使它们有标签索引。例如，param 元素可选项卡或head 元素是没有意义的。我也不认为option 元素可能是可选项卡，但我不确定。而且我更不确定map 之类的东西，它可以包含可选项卡元素，但它们本身通常不能选项卡。

谁能给我一个列表，列出所有即使有 tabindex 也永远无法获得焦点的元素？

【问题讨论】：

你测试过head元素是不是真的不能tab吗？
不，我没有测试过。我只是举个例子。
我刚刚在 Chrome 17.x 中测试，发现 head 元素不可标签。 title 或 param 都不是，但 option 元素是可标签的（显然，只有在您提供标签索引时）。但这仍然不能回答我的问题。
这可能会有所帮助：stackoverflow.com/questions/3059203/tab-index-on-div
@BillyMoat 恐怕没有帮助，它只是说明不能在 html4 中使用 tabindex 和 div，我的问题实际上是在询问 html5。（根据您的评论，我编辑了问题正文以特别提及这一点，尽管我对此感到不舒服，因为我持有 WHATWG 风格的观点，即没有 html5 之类的东西！）

标签： html focus keyboard-navigation

【解决方案1】：

由于还没有人提出任何明确的列表，我在一个相当新的 Chrome 版本上进行了一些测试，并提出了以下根本不可选项卡的元素列表：

<base>
<basefont>
<embed>
<head>
<link>
<meta>
<object>
<param>
<source>
<style>
<title>
<track>

不幸的是，由于我只花了几个小时来编写这份清单，因此有一些注意事项：

未在 Chrome 以外的任何浏览器上测试
我跳过了大部分我认为可能是可选项卡的元素（因为它们会显示正常的内容）
我没有尝试设置任何显示（除了 <title> 在我的 cmets 中）

我最惊讶的是以下元素是可选项卡的：

<audio> 和 <video>（很惊讶，因为 <embed> 和 <object> 不是）
<br> 和 <wbr>
<col> 和 <colgroup>
<frame> 和 <frameset>（尽管它们更像是一种特殊情况，因为它们在 HTML 中并不是技术上有效的元素）
<html>（从标签的角度来看，这和 <body> 几乎没有区别）
<optgroup> 和 <option> （尽管对它们进行标记不会给出任何视觉指示 - 即选择框没有打开）

【讨论】：

将@Kidburla 的评论添加到答案而不是问题中，以便其他人更容易阅读，正如答案本身所提到的那样："PS, strangely, that "title" thing seems to work within jsFiddle, but not in a standalone page :S Maybe because jsFiddle is rendering the result in an iframe, which changes the displayability of the title. – Kidburla Jan 4 '13 at 17:59"

【解决方案2】：

The HTML spec lists conditions under which elements are focusable 和 how tabindex is interpreted。

元素的 tabindex 焦点标志已设置。
该元素要么正在呈现，要么是表示嵌入内容的画布元素的后代。
元素及其任何祖先都不是惰性的。
元素未被禁用。

定义依赖于被渲染的元素，使用 CSS 你可以使 any 元素被渲染。例如，可聚焦的<param> 甚至<title> 和<basefont>：

<!DOCTYPE>
<title tabindex=0>Test</title>
<basefont tabindex=0>
<style>
head, title {display:block}
basefont, param {content: url(image.png);}
</style>
<object><param tabindex=0></object>

顺便说一句：忽略 W3Schools — 通常这不是可靠/权威的来源。

【讨论】：

您好。首先，总的来说，我同意您对 W3Schools 的看法，并不愿提及它们。但这是我能找到的最简单的引用，它总结了我所知道的关于 tabindex 属性的适用性的真实情况。感谢您提供的链接。但是，我在那里看不到任何明确排除任何元素（例如<param>）的内容。特别是，WHATWG 似乎对“正在渲染”这个术语有一个相当奇怪的定义，它依赖于样式属性，因此包括没有任何视觉内容的元素。
@Kidburla 确实，规范中没有任何内容禁止它。它不需要——它可能只是对所有元素一视同仁，并且它有效。可以使用 CSS 添加内容。我用可聚焦的<param> 更新了我的示例。
它并没有按预期工作。我不确定如何使用您给出的确切示例进行测试。但是尝试在末尾添加一点<a tabindex=1>aa</a><a tabindex=3>bb</a>，然后将参数的 tabindex 更改为 2。您会看到 tab 顺序直接从元素“aa”移动到“bb”，并完全跳过了 <param>。跨度>
@Kidburla 这就是tabindex 的工作方式，无论涉及的元素类型如何。 Non-0 tabindex 是一罐你不想打开的蠕虫。
这不是真的。 tabindex 按您的预期工作。如果您的元素是我认为是“可选项卡”的元素（例如input、a 等），那么选项卡顺序将遵循该元素。你可以自己试试。