为什么 `a` 标签需要设置 `tabindex=0`？

Question

我正在开发一个网页应用程序，其中一个重复的（锚点）元素在我通过页面时无法获得键盘焦点。只有当我添加tabindex=0时，才能将其选中。尽管我的目标是使焦点可见，但我使用jQuery代码片段来确定元素是否获得了焦点：

// 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'));
  } 
});

)

这让我感到困惑。根据 规范, "tabindex"属性也可以将任何元素变成交互内容 - 但是默认情况下，列表中的一个交互元素为 a。

再次引用无障碍文章：

一个 [tabindex] 值为0表示该元素应放置在默认导航顺序中。这使得那些原生不支持焦点的元素（如 <div>, <span> 和 <p>）能够接收键盘焦点。当然，通常应使用链接和表单控件来创建所有交互式元素... (http://webaim.org/techniques/keyboard/tabindex)

是什么原因导致锚点元素在通过页面的交互元素时被跳过?

- Nathan Long

---

a标签是否有href属性？如果它的交互仅来自JavaScript，那可能就是原因。 - Katana314

相关：从 Tab 索引中删除元素 - GolezTrol

可能有各种原因。请告诉我们哪些<a>标签属性不是选项卡。 - Spencer Wieczorek

Answer 1

根据您的问题：

引起锚点元素被跳过，无法通过页面交互元素进行制表的原因是什么？

如果您添加tabindex =“-1”，则将跳过该元素。
如果您的标记没有href，则也会被跳过。

- taxicala

---

没有 href - 那就是问题所在。谢谢！ - Nathan Long

没问题！很高兴能帮忙。 - taxicala

那么，如果我有一个没有href属性的锚点tag，该如何聚焦呢？ - Rashid

@Rashid 这意味着锚标签很可能被错误使用了，你应该将其替换为另一个HTML元素，例如按钮。 - undefined

Answer 2

如果使用tabindex为“-1”，则应用它的元素将不再可通过键盘聚焦。 您可以查看W3C规范。

- Avijit Kumar