CODEWITHSUNDEEP
htmlaccessibility
Nathan Long
Nathan Long

Reputation: 125892

Why would an `a` tag need `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.

(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?

Upvotes: 26

Views: 32339

Answers (2)

Avijit Kumar
Avijit Kumar

Reputation: 538

If a tabindex of “-1″ is used, the element it’s applied to will no longer be keyboard focusable.

You can check the W3C specification for it.

Upvotes: 0

taxicala
taxicala

Reputation: 21759

As per your question:

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

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

Upvotes: 51

Related Questions