html - 为什么 `a` 标签需要 `tabindex=0` ？

Question

我正在开发一个网络应用程序，当我在页面中切换时，其中一个重复的 a(定位点)元素没有获得键盘焦点。只有当我添加 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'));
  } 
});

)

这让我很困惑。根据the specs , “tabindex 属性也可以将任何元素变成交互式内容”——但是 a 是他们默认列出的交互式内容之一。

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

A [tabindex] value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements... (http://webaim.org/techniques/keyboard/tabindex)

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

Answer 1

根据您的问题:

What would cause an anchor element to be skipped as I tab through the interactive elements of a page?

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