`tabindex` attribute

Use tabindex to control whether an element can receive keyboard focus. Preserve the natural document order whenever possible.

What you will learn

How the browser normally moves focus with Tab
What tabindex="0" and negative values mean
Why positive tabindex values usually create accessibility problems

What does `tabindex` do?

Interactive elements such as links, buttons, and form controls are naturally focusable. tabindex can add or remove keyboard focus from other elements, or place them in the document's focus order.

The recommended values

tabindex="0": Adds an otherwise non-focusable element to the natural Tab order. Use this only when a custom control truly needs it.
tabindex="-1": Allows focus from JavaScript, but skips the element during normal Tab navigation. Useful for moving focus to a dialog or heading after an update.
Positive values: Values such as 1 and 2 create a separate priority order. They become hard to maintain as the page changes, so avoid them.

Move focus to a result heading

<h2 id="results" tabindex="-1">Search results</h2>

// After displaying results:
document.querySelector('#results').focus();

Prefer native controls

Do not add tabindex to a div just to make it behave like a button. A native button already supports focus, keyboard activation, and the correct accessibility semantics. If a custom widget is unavoidable, implement its full keyboard behavior and visible focus style.

Natural order is usually enough

<button type="button">Previous</button>
<button type="button">Next</button>
<a href="/help.html">Help</a>

Checklist

Keep the DOM order aligned with the visual and logical reading order.
Never remove focus from an interactive control without providing another way to operate it.
Ensure focused elements have a visible focus indicator.
Test with Tab, Shift+Tab, Enter, and Space where relevant.

tabindex attribute