为什么`a`标签需要`tabindex = 0'？ [英] Why would an `a` tag need `tabindex=0`?

问题描述

我正在使用Web应用程序，重复的 a （锚定）元素之一在我浏览页面时无法获得键盘焦点。仅当我添加 tabindex = 0 时，才能对其进行制表。

I'm working on a web app, and one of the repeated a (anchor) elements does not get keyboard focus as I tab through the page. Only if I add tabindex=0 can I tab to it.

（尽管我的目标是集中精力可见，我在确定元素是否通过使用jQuery片段来获得焦点：

(Although my goal is to make the focus visible, I'm determining whether an element gets focus by using a snippet of 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 是默认情况下被列为交互式的元素之一。

This confuses me. According to the specs, "The tabindex attribute can also make any element into interactive content" - but a is one of the ones they list as interactive by default.

再次，从可访问性文章中

And again, from an accessibility article:

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

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)

会导致什么

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

推荐答案

根据您的问题：

是什么导致我在浏览页面的
交互式元素时跳过锚元素？

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

如果添加 tabindex =-1 ，该元素将被跳过。

并且如果您的< a> 标签没有 href ，则也会跳过该标签。

If you add tabindex="-1" the element will be skipped.
And if your <a> tag has no href, it will be skipped as well.

这篇关于为什么`a`标签需要`tabindex = 0'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！