HTML tabindex Attribute

Introduction

The tabindex attribute lets you control whether an HTML element can receive keyboard focus and where it appears when users press the Tab key. It is a global attribute, meaning it can be used on most elements.

Used thoughtfully, tabindex improves accessibility for keyboard and assistive technology users. Used carelessly—especially with positive numbers like 1, 2, 3—it can create confusing focus jumps.

What You’ll Learn

Purpose of tabindex

The primary purpose of the tabindex attribute is to influence focus behavior when a user navigates with the keyboard. Interactive elements like <button>, <a href>, and <input> are focusable by default; tabindex can extend focus to custom widgets or remove elements from the tab sequence.

It is particularly useful for accessibility: ensuring custom controls participate in keyboard navigation, moving focus into modals with JavaScript, or keeping decorative elements out of the tab order.

📝 Syntax

Add tabindex to any HTML element with an integer value:

<button tabindex="0">Focusable in natural order</button>
<div tabindex="-1" id="modal">Focus via JS only</div>

Syntax Rules

• Global attribute — valid on nearly all HTML elements.
• Value must be a valid integer (typically 0, -1, or positive).
• Omitting tabindex uses the browser’s default focus behavior for that element type.
• IDL property: HTMLElement.tabIndex (note capital I in JavaScript).
• Pair custom focusable elements with keyboard event handlers and ARIA roles where appropriate.
• Never use positive tabindex as a default styling trick.

💎 Values

The tabindex attribute accepts integer values. The three common categories are:

• No attribute / browser default — Native interactive elements (links with href, buttons, inputs) are focusable in DOM order. Non-interactive elements are not.
• tabindex="0" — Element becomes focusable and is inserted into the natural tab order at its DOM position. Recommended for custom widgets like a div acting as a button.
• tabindex="-1" — Element can receive focus via JavaScript (element.focus()) but is skipped by the Tab key. Useful for modals, skip targets, or moving focus programmatically.
• Positive integers (1, 2, 3…) — Focused before 0 elements, in ascending numeric order. Lower numbers first. Generally discouraged except rare legacy cases.

<button tabindex="1">First (positive queue)</button>
<input type="text" tabindex="2">
<a href="#" tabindex="3">Link</a>
<input type="checkbox" tabindex="-1" id="hiddenCheckbox">

Applicable Elements

tabindex values compared

Examples Gallery

Custom tab order with positive values (educational), dynamic JavaScript updates, and the recommended tabindex="0" pattern.

<button tabindex="1">Click me</button>
<input type="text" tabindex="2" placeholder="Type something">
<a href="#" tabindex="3">Visit our website</a>
<input type="checkbox" tabindex="-1" id="hiddenCheckbox">

<input type="text" placeholder="First" tabindex="1">
<input type="text" id="dynamicElement" placeholder="Moved by JS">
<input type="text" placeholder="Third" tabindex="3">

<script>
  document.getElementById("dynamicElement").tabIndex = 2;
</script>

<div
  role="button"
  tabindex="0"
  onclick="alert('Clicked!')"
  onkeydown="if(event.key==='Enter'||event.key===' ')alert('Activated!')">
  Custom button (Tab + Enter/Space)
</div>

♿ Accessibility

• Preserve logical DOM order — Reordering with positive tabindex often harms predictability for screen reader users.
• Use native elements first — A real <button> beats div tabindex="0" for free keyboard support.
• Visible focus indicators — Never remove focus outlines without providing an accessible alternative.
• Manage modal focus — Use tabindex="-1" plus focus() to trap and restore focus in dialogs.
• Test with keyboard only — Unplug the mouse and Tab through every interactive path.

💡 Best Practices