Understanding `tabIndex` in HTML

In HTML, the tabIndex attribute allows an element to receive focus using the keyboard.

tabIndex Attribute Values

tabIndex=0:

• The element can receive focus and follows the default tab order.
• It is commonly used to make elements like div or span, which do not normally receive focus, focusable.

tabIndex=-1:

• The element can receive focus, but cannot be focused using the Tab key.
• It can only be focused programmatically using JavaScript's focus() method.

tabIndex > 0:

• The element receives focus after the elements with tabIndex=0.
• Elements are focused in order from the lowest to the highest tabIndex value.
• Using values greater than 0 is generally not recommended, as it can cause accessibility issues.

<button>Default Button (tabIndex=0)</button>
<div tabindex="{1}">Tab Index 1</div>
<div tabindex="{2}">Tab Index 2</div>
<div tabindex="{0}">Tab Index 0</div>
<div tabindex="{-1}">Tab Index -1</div>

Focus Order

1. Default Button (tabIndex=0)
2. Element with tabIndex={0}
3. Element with tabIndex={1}
4. Element with tabIndex={2}

• Element with tabIndex={-1} is not focusable with the Tab key