Tabindex

In this tutorial, you will learn about Tabindex. We cover key concepts, practical examples, and best practices to help you master this topic.

The tabindex attribute controls keyboard focusability with three categories: 0 for natural order, -1 for programmatic focus only, and positive values that create confusing custom tab orders to avoid.

In this tutorial, you'll master the three faces of Keyboard Navigation tabindex.

What You'll Learn

By the end of this lesson, you'll understand the three tabindex value categories, when to use each, and why positive tabindex values are harmful.

Why It Matters

Misusing tabindex creates confusing navigation orders and keyboard traps. Correct tabindex usage is the foundation of keyboard Accessibility.

Real-World Use

Doda Browser's UI uses tabindex="0" for custom controls and tabindex="-1" for the skip link and error summaries.

Tabindex Categories

flowchart TD
  A[tabindex attribute] --> B[tabindex='0']
  A --> C[tabindex='-1']
  A --> D[tabindex='positive']
  B --> E[Added to natural tab order]
  B --> F[Focusable by Tab]
  C --> G[Not in tab order]
  C --> H[Focusable via JavaScript]
  D --> I[Custom tab order: AVOID]
  D --> J[Creates confusing flow]

tabindex="0"

Makes an element focusable by Tab in natural DOM order:

<div tabindex="0" role="button" onclick="scan()">
  Start Scan
</div>

Use for custom interactive elements that should be in the tab sequence.

tabindex="-1"

Makes an element programmatically focusable but not reachable by Tab:

<div id="error-summary" tabindex="-1" role="alert">
  <h3>Error summary</h3>
  <ul>
    <li>Email is required</li>
  </ul>
</div>

// Focus the error summary after validation
document.getElementById('error-summary').focus();

Positive tabindex (Avoid)

Positive values create a custom tab order that overrides the DOM:

<!-- Bad: confusing tab order -->
<button tabindex="3">Save</button>
<button tabindex="1">Cancel</button>
<button tabindex="2">Delete</button>
<!-- Tab order: Cancel → Delete → Save -->

Never use positive tabindex values. Use DOM order instead.

Common Mistakes

• Using positive tabindex to reorder elements: DOM order should match the logical navigation order.
• Forgetting tabindex="0" on custom interactive elements: Custom buttons, sliders, and checkboxes need tabindex.
• Using tabindex="-1" to prevent keyboard access: Remove the element instead if it should not be focusable.
• Applying tabindex to non-interactive elements unnecessarily: Static text does not need tabindex.
• Not removing tabindex when an element becomes non-interactive: Dynamic content needs dynamic tabindex management.

Practice and Challenge

1. What does tabindex="0" do? Adds the element to the natural tab order.

2. When would you use tabindex="-1"? For programmatic focus only, like error summaries or skip links before activation.

3. Why should you avoid positive tabindex values? They create confusing, non-intuitive navigation orders that are hard to maintain.

4. How does a screen reader announce an element with tabindex? It announces the role and state regardless of tabindex. The tabindex only affects keyboard focus.

5. Challenge: Find three elements on a page that use tabindex. Verify each usage is correct.

FAQ