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.
(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'));
}
});
)
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:
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?
As per your question:
If you add
tabindex="-1"
the element will be skipped.And if your
<a>
tag has nohref
, it will be skipped as well.