为什么 `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、"The tabindex attribute can also make any element into interactive content" - 但 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)

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

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，它也会被跳过。

Answer 2

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

你可以查看W3C specification。

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

Why would an `a` tag need `tabindex=0`?

html

accessibility