Questions tagged [tabindex]

The tabindex content attribute allows authors to control whether an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation, and what is to be the relative order of the element for the purposes of sequential focus navigation. The name "tab index" comes from the common use of the "tab" key to navigate through the focusable elements. The term "tabbing" refers to moving forward through the focusable elements that can be reached using sequential focus navigation.
W3C Recommendation: HTML5
Section 7.4.1 Sequential focus navigation and the tabindex attribute

The tabindex starts at 0 or any positive whole number and increments upward. It's common to see the value 0 avoided because in older versions of Mozilla and IE, the tabindex would start at 1, move on to 2, and only after 2 would it go to 0 and then 3. The maximum integer value for tabindex is 32767. If elements have the same tabindex then the tabindex will match the source order in the markup.

A negative value (usually tabindex="-1") will remove the element from the tab index and it will never be focusable via keyboard navigation. Focus can be given to the element programmatically using element.focus() or with mouse click for focusable elements.

If you specify the tabindex attribute with no value or an empty value it will be ignored.

If the disabled attribute is set on an element which has a tabindex, the element will be ignored.

If a tabindex is set anywhere within the page regardless of where it is in relation to the rest of the code (it could be in the footer, content area, where-ever) if there is a defined tabindex then the tab order will start at the element which is explicitly assigned the lowest tabindex value above 0. It will then cycle through the elements defined and only after the explicit tabindex elements have been tabbed through, will it return to the beginning of the document and follow the natural tab order.

In the HTML4 spec only the following elements support the tabindex attribute: anchor, area, button, input, object, select, and textarea. But the HTML5 spec, with accessibility in mind, allows all elements to be assigned tabindex.

--

For example

<ul tabindex="-1">
  <li tabindex="0"></li>
  <li tabindex="1"></li>
  <li tabindex="2"></li>
</ul>

is the same as

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

because regardless of the fact that they are all assigned tabindex="1", they will still follow the same order, the first one is first, and the last one is last. This is also the same..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

because you do not need to explicitly define the tabIndex if it's default behavior. A div by default will not be focusable, the anchor tags will.