Tabindex

The HTML tabindex attribute controls whether an element can receive keyboard focus and in what order. Three values exist: 0 to include an element in the natural tab order, -1 to make it focusable only via JavaScript, and positive values, which you should never use.

A clickable <div> doesn't receive focus when you press Tab. To the browser, it's just a container. The tabindex attribute changes that: it tells the browser which elements should participate in keyboard navigation, and which should be excluded from it.

#Three values, three behaviors

tabindex accepts an integer. Only two values deserve your attention.

tabindex="0" inserts the element into the natural tab order, at its position in the DOM. A <div> with tabindex="0" will be reached by Tab just like a button or a link:

<div role="button" tabindex="0">Submit</div>

tabindex="-1" removes the element from the tab order, but makes it focusable via JavaScript with element.focus(). This is the value used for skip links targets, modals, or error messages:

<main id="content" tabindex="-1">…</main>
<script>
  document.querySelector('#content').focus();
</script>

Positive values (tabindex="1", "5", "32") create a parallel order. The element receives focus before all elements with tabindex="0", regardless of its position in the code. On a page with 50 interactive elements, a single tabindex="1" is enough to make the navigation unpredictable. The W3C formally advises against it.

#The mistake that goes unnoticed

Adding tabindex="0" to a non-interactive element, such as a paragraph, an image, or a heading. The element receives focus, but nothing happens when the user presses Enter. Each unnecessary tabindex adds an extra stop in the keyboard navigation. For someone navigating a form with 20 fields, these phantom stops quickly become tiresome.

Another pitfall: adding tabindex="0" to a custom component and considering the work done. The component is focusable, but without an ARIA role or handling of Enter and Space keys, it remains silent for screen readers. A native <button> handles all of that for you.

Use it.

#In summary

tabindex="0" to make an element focusable. tabindex="-1" for programmatic focus. Positive values, never. And before adding a tabindex, ask yourself: wouldn't a native HTML element do the job without configuration?