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

）

这让我很困惑。根据{{3}}，“tabindex属性也可以将任何元素转换为交互式内容” - 但a是默认情况下列为交互式的属性之一。

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

[tabindex]值为0表示该元素应放在默认导航顺序。这允许非本地元素可聚焦（例如＆lt; div＆gt;，＆lt; span＆gt;和＆lt; p＆gt;）来接收键盘焦点。当然，通常应该为所有人使用链接和表单控件互动元素...... （the specs）

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

Answer 1

根据你的问题：

当我通过选项卡时，会导致跳过锚元素的原因是什么页面的互动元素？

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

Answer 2

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

您可以查看W3C specification。

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

2 个答案: