HtmlConceptBeginner · 3 min read

What is tabindex in HTML: Explanation and Usage

The tabindex attribute in HTML controls the order in which elements receive keyboard focus when pressing the Tab key. It allows you to set which elements can be focused and in what sequence, improving navigation especially for keyboard users.

⚙️

How It Works

Think of tabindex as a way to guide someone using a keyboard through a webpage, like giving them a map to jump from one spot to another in a specific order. Normally, pressing the Tab key moves focus through links, buttons, and form fields in the order they appear in the HTML. But with tabindex, you can change this order or include elements that are not normally focusable.

For example, if you want a button to be focused before a link, you can assign a lower tabindex number to that button. Elements with a positive tabindex get focused first in ascending order, then elements with tabindex="0" follow in the natural order. A tabindex of 0 means the element is focusable in the natural order, and -1 makes the element focusable only by script, not by tabbing.

💻

Example

This example shows three buttons with different tabindex values. Pressing Tab will focus them in the order of their tabindex values, not their position in the HTML.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabindex Example</title>
</head>
<body>
  <button tabindex="2">Second Focus</button>
  <button tabindex="1">First Focus</button>
  <button tabindex="3">Third Focus</button>
</body>
</html>

Output

Three buttons labeled 'Second Focus', 'First Focus', and 'Third Focus' appear in that order. Pressing Tab focuses 'First Focus' button first, then 'Second Focus', then 'Third Focus'.

🎯

When to Use

Use tabindex when you want to improve keyboard navigation on your webpage. For example, if you have custom interactive elements like divs acting as buttons, adding tabindex="0" makes them reachable by keyboard.

Also, use positive tabindex values sparingly to control focus order when the natural HTML order does not match the logical flow, such as in complex layouts or modals.

Avoid overusing positive tabindex because it can confuse users if the focus jumps unexpectedly. Instead, try to arrange your HTML in a logical order first.

✅

Key Points

tabindex="0": Element is focusable in natural tab order.
tabindex="-1": Element is focusable only by script, not by tab key.
Positive tabindex: Sets explicit focus order, but use carefully.
Improves accessibility for keyboard users.
Helps custom elements become keyboard navigable.

✅

Key Takeaways

The tabindex attribute controls keyboard focus order on a webpage.

Use tabindex="0" to make elements keyboard focusable in natural order.

Positive tabindex values set custom focus order but can confuse users if overused.

tabindex="-1" allows focus only via scripts, not keyboard tabbing.

Proper tabindex use improves accessibility and user experience.