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

Question

我正在开发一个Web应用程序,其中一个重复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'));
  } 
});

)

这让我很困惑.根据规范,"tabindex属性也可以使任何元素成为交互式内容" - 但是a默认情况下它们列为交互式的一个.

再次,从可访问性文章:

[tabindex]值为0表示该元素应按默认导航顺序放置.这允许不可本机聚焦的元素(例如<div>,<span>和<p>)接收键盘焦点.当然,通常应该为所有交互元素使用链接和表单控件...(http://webaim.org/techniques/keyboard/tabindex)

当我浏览页面的交互元素时,会导致跳过锚元素的原因是什么？

Answer 1

根据你的问题:

当我浏览页面的交互元素时,会导致跳过锚元素的原因是什么？

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