Skip to content

tabindex

This lesson explains tabindex in web accessibility with clear examples, practical use cases, and implementation best practices.

Tabindex Overview

The tabindex attribute controls whether an HTML element can receive keyboard focus and how it participates in the keyboard navigation order. Proper use of tabindex helps keyboard users navigate webpages efficiently while supporting screen readers and other assistive technologies.

In most cases, native HTML elements such as button, a, input, and select already provide correct keyboard behavior. Developers should use tabindex only when necessary and avoid disrupting the natural tab order.

Tabindex Value Behavior
0 Adds an element to the natural keyboard tab order.
-1 Allows programmatic focus but removes it from tab navigation.
Positive Value Creates a custom tab order (generally discouraged).
Native Controls Usually do not require a tabindex attribute.
Keyboard Users Navigate using the Tab and Shift + Tab keys.
WCAG Recommends maintaining a logical focus order.

Tabindex Example

<button>
  Save
</button>

<div tabindex="0">
  Custom Interactive Panel
</div>

<div tabindex="-1">
  Success Message
</div>

In this example, the custom panel becomes keyboard focusable using tabindex="0", while the success message can receive focus programmatically with tabindex="-1" but is skipped during normal keyboard navigation.

Common Tabindex Values

Understanding when to use each tabindex value helps create a predictable and accessible keyboard navigation experience.

Value Purpose Recommended Usage
0 Add to natural tab order Custom interactive components.
-1 Programmatic focus only Dialogs, notifications, error messages.
1 or Higher Custom tab order Avoid unless absolutely necessary.
button Native keyboard support No tabindex required.
input Native keyboard support No tabindex required.
a href Native keyboard support No tabindex required.

Tabindex Best Practices

Best Practice Description
Use Native HTML Prefer built-in interactive elements whenever possible.
Use tabindex="0" Make custom interactive components keyboard accessible.
Use tabindex="-1" Move focus programmatically without affecting tab order.
Avoid Positive Values Do not create custom keyboard navigation sequences.
Maintain Logical Order Follow the visual layout of the page.
Test Keyboard Navigation Verify navigation using only the keyboard.

Common Tabindex Mistakes

  • Using positive tabindex values throughout the page.
  • Applying tabindex to every HTML element unnecessarily.
  • Making non-interactive elements keyboard focusable.
  • Creating an illogical keyboard navigation order.
  • Ignoring native HTML controls that already support keyboard navigation.
  • Using tabindex instead of semantic HTML.
  • Removing keyboard focus from important controls.
  • Failing to test keyboard navigation after implementation.

Key Takeaways

  • Use native HTML controls whenever possible.
  • tabindex="0" adds custom elements to the natural tab order.
  • tabindex="-1" allows programmatic focus without affecting keyboard navigation.
  • Avoid positive tabindex values because they create confusing navigation.
  • Maintain a logical focus order that matches the visual layout.
  • Always test keyboard navigation before deploying your application.

Pro Tip

If you find yourself adding tabindex to many elements, it's usually a sign that semantic HTML should be used instead. Native elements like button, a, and input already provide correct keyboard behavior and are easier to maintain.

You now understand how the tabindex attribute affects keyboard navigation and focus order. In the next lesson, you'll learn about skip links, a powerful accessibility feature that allows keyboard users to bypass repetitive navigation and jump directly to the main content.