Tabindex

What Is Tabindex?

tabindex is a global HTML attribute that determines whether an element can receive keyboard focus and where it falls in the tab navigation sequence. When a user presses the Tab key, the browser moves focus through focusable elements in a specific order. tabindex gives developers control over which elements participate in this navigation and, in limited cases, their order.

By default, only interactive HTML elements are focusable: links with href attributes, buttons, form inputs, selects, textareas, and elements with contenteditable. Non-interactive elements like <div>, <span>, <p>, and <h1> are not in the tab order. tabindex can change this behavior.

The attribute accepts integer values, and each value range has distinct behavior: negative values (typically -1), zero, and positive values (1 and above). Understanding these three categories is fundamental to accessible keyboard navigation.

Why It Matters

Keyboard accessibility is a cornerstone of web accessibility. WCAG Success Criterion 2.1.1 (Keyboard) requires that all functionality be operable through a keyboard interface. When custom interactive components are built with non-interactive elements, they are invisible to keyboard navigation unless tabindex makes them focusable.

A custom dropdown built with <div> elements will never receive keyboard focus without tabindex. A user pressing Tab will skip right over it, making the component completely inoperable without a mouse. Adding tabindex="0" to the appropriate elements brings them into the tab order and begins making the component keyboard accessible.

Conversely, misusing tabindex with positive values can severely damage navigation. It creates unpredictable tab sequences where focus jumps around the page in an order disconnected from the visual and DOM layout. WCAG Success Criterion 2.4.3 (Focus Order) requires that navigation sequences preserve meaning and operability, which positive tabindex values frequently violate.

How It Works

tabindex="0" places the element in the natural tab order based on its position in the DOM. This is the most commonly used value. The element becomes focusable via the Tab key and via JavaScript, and it appears in the tab sequence exactly where it sits in the source code.

<!-- Custom button using a div -->
<div role="button" tabindex="0" onclick="handleClick()">
  Click Me
</div>

tabindex="-1" removes the element from the tab order but allows it to receive focus programmatically via JavaScript's element.focus(). This is essential for focus management scenarios: moving focus to headings after navigation, managing focus within composite widgets, or focusing elements that shouldn't be tab stops.

<!-- Heading that receives focus after route change -->
<h1 tabindex="-1" id="page-title">Dashboard</h1>

<script>
  // After navigation, move focus to the heading
  document.getElementById('page-title').focus();
</script>

Positive tabindex (1, 2, 3...) creates a custom tab order. Elements with positive values receive focus before any elements with tabindex="0", ordered by their numeric value. Elements with the same positive value are ordered by DOM position.

This sounds useful in theory but is an anti-pattern in practice. Positive tabindex values:

• Override the natural, predictable DOM order.
• Become impossible to maintain as pages grow and change.
• Create confusion when mixed with the natural tab order.
• Are flagged as accessibility issues by automated testing tools.

Best practices:

• Use native interactive elements whenever possible. A <button> is always better than a <div tabindex="0" role="button">.
• Use tabindex="0" sparingly and only for custom interactive elements that have no native equivalent.
• Use tabindex="-1" for programmatic focus. Headings, error summaries, modal containers, and other elements that need focus management but shouldn't be tab stops.
• Never use positive tabindex values. Restructure your DOM order instead.
• Remember that tabindex alone doesn't make a custom element accessible. You still need appropriate roles, keyboard event handlers, and ARIA states.

<!-- Complete custom checkbox example -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="false"
  aria-label="Subscribe to newsletter"
  onkeydown="if(event.key===' ') toggleCheckbox(this)"
  onclick="toggleCheckbox(this)"
></div>

The tabindex attribute applies to the accessibility tree as well. Elements with tabindex="0" or tabindex="-1" become part of the focus management system that assistive technologies rely on.