Luciano Battagliero

§Wait, Is `tabindex` Not an Index?

Published on

Every time I need to use tabindex, I have to look up which value adds an element to the natural tab order. Every. Single. Time. The answer is 0. The name of the attribute includes the term “index” in it. In most programming contexts, index 0 means the first position. So tabindex="0" should mean first in the tab order. But it doesn’t. What the actual… focus!?

§How Tabindex Actually Works

The browser builds the tab order by sorting elements into three groups:

  1. Elements with a positive value, sorted ascending. 1 before 5 before 10, regardless of their position in the DOM.
  2. Everything else, in document order. This includes elements with 0 and natively focusable elements with no tabindex at all.
  3. Elements with a negative value (typically -1) are removed from the tab order entirely.

So, tabindex="0" means “no sorting preference; use DOM order”.

§Should I Call You taborder Instead?

tabindex="0" doesn’t place an element first in the tab order, nor does tabindex="5" place it at position 5. The value defines a relative order, not an absolute placement. That’s not an index.

Filed under #technical

Subscribe to the RSS feed