References

Beginner-friendly references for web development, with live, editable examples.

The HTML tabindex attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML tabindex attribute controls keyboard focus. tabindex="0" adds an element to the natural tab order, tabindex="-1" makes it focusable only via script (not the Tab key), and positive values force a custom order (an anti-pattern). It is a global attribute.

Overview

The tabindex attribute decides whether an element can receive keyboard focus and where it sits in the tab order. There are three meaningful cases:

  • tabindex="0" — the element joins the natural tab order at its position in the DOM. Use it to make a custom interactive widget focusable.
  • tabindex="-1" — the element is focusable from JavaScript (element.focus()) but is skipped by the Tab key. Use it for focus targets such as dialogs or "skip to content" destinations.
  • tabindex="1" or higher — forces an explicit tab order ahead of everything else. This almost always breaks the expected order and is considered an anti-pattern.

Native interactive elements (links, buttons, form fields) are already focusable, so they rarely need tabindex at all.

Syntax

<!-- Make a custom widget focusable -->
<div tabindex="0" role="button">Custom button</div>

<!-- Programmatic focus target only -->
<div tabindex="-1" id="dialog">…</div>

Values

Value
0 (focusable, in DOM order), -1 (focusable via script only), or a positive integer (custom order — avoid).

Example

Live example 
<span tabindex="0" style="display:inline-block; padding:6px 10px; background:#eef5ff; border-radius:6px;">I am keyboard-focusable — press Tab.</span>

Best practices

  • Never use positive tabindex values — keep the DOM order meaningful instead.
  • Use tabindex="0" to make custom interactive widgets focusable (and add a role plus keyboard handlers).
  • Use tabindex="-1" for programmatic focus targets such as dialogs and skip-link destinations.
  • Do not add tabindex to non-interactive content just to make it focusable — it confuses keyboard users.

Accessibility

tabindex is one of the most important attributes for keyboard accessibility, and it is easy to misuse:

  • Custom controls (role="button", menus, tabs) need tabindex="0" so keyboard users can reach them — plus key handlers for Enter/Space.
  • Manage focus with tabindex="-1" and element.focus() when opening dialogs or moving the user to new content.
  • Positive values reorder the page unpredictably and should be avoided entirely.

Frequently asked questions

What is the tabindex attribute?
It controls whether an element is keyboard-focusable and, with positive values, its position in the tab order.
What is the difference between tabindex 0 and -1?
0 puts the element in the normal Tab order; -1 makes it focusable only through scripting (element.focus()) and skips it when tabbing.
Why should I avoid positive tabindex values?
A positive tabindex jumps ahead of the natural order and is very hard to keep consistent, which confuses keyboard and screen-reader users.
Do links and buttons need tabindex?
No. Native interactive elements are already in the tab order; adding tabindex is usually unnecessary and can cause bugs.
style (attr) title