为什么“a”标签需要“tabindex=0”？

Question

我正在开发一个网络应用程序，当我在页面中切换时，重复的 a（锚）元素之一没有获得键盘焦点。只有添加tabindex=0 才能使用tab。

（虽然我的目标是让焦点可见，但我正在通过使用 jQuery 的 sn-p 来确定元素是否获得焦点：

// Whenever I hit tab, show me which element has focus
$('main').on('keydown',function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    console.log("focus is now on ", $(':focus'));
  } 
});

)

这让我很困惑。根据the specs 的说法，“tabindex 属性还可以使任何元素成为交互式内容” - 但a 是他们默认列为交互式的元素之一。

再一次，来自可访问性文章：

[tabindex] 值为 0 表示该元素应放置在 默认导航顺序。这允许 不是原生的元素 focusable（例如

、 和

）接收键盘焦点。 当然，通常应该对所有人使用链接和表单控件 互动元素... (http://webaim.org/techniques/keyboard/tabindex)

当我在页面的交互元素中切换时，什么会导致锚元素被跳过？

【问题讨论】：

• a标签有href吗？如果它的交互性完全来自 javascript，那就可以解释了。
• 相关：Remove element from tab index
• 可能有多种原因。请告诉我们<a> 标签有哪些属性不是标签。

Answer 1

根据你的问题：

当我在 页面的交互元素？

如果您添加tabindex="-1"，该元素将被跳过。
如果你的<a> 标签没有href，它也会被跳过。

Answer 2

如果使用“-1”的tabindex，则应用它的元素将不再是键盘可聚焦的。

您可以查看W3C specification。