HTML tabindex Attribute: How it Works with Examples

The HTML tabindex Attribute lets you change the tab order on a web page. It helps control keyboard access.

What Is the HTML tabindex Attribute?

The HTML tabindex Attribute sets the order of elements when someone uses the Tab key. It helps users move from one part to another on the keyboard.

Some users use a keyboard instead of a mouse. This attribute helps them move through form fields or buttons without trouble.

You add the attribute to any element that supports focus. Just write tabindex with a number inside the tag.

<button tabindex="1">Click Me</button>

This button now gets focus before any element with a higher number.

You can set tabindex to three types of values. Each one changes how the focus works on a page.

• A positive number like 1, 2, or 3 places the element in a set order.
• A zero lets the element join the default tab order.
• A negative like -1 removes the element from the tab chain, but still allows manual focus.

When you use tabindex, you take control of the path a user follows with the Tab key. The browser follows numbers in order. After those, it goes to items without tabindex.

When to Use the tabindex Attribute (and When Not To)

You can use tabindex when you need to set how users move through parts of your page by keyboard. It helps when the default tab order does not fit the layout or flow.

Custom Parts That Need Focus

Some HTML elements do not receive focus with the tab. Add tabindex="0" to make them focusable. That will make them act like form fields.

<div tabindex="0">Click or focus this part</div>

You can do this when you build a menu or tab with just <div> and want users to move to it with a keyboard.

Make Element Focusable Only by Script

You can stop a user from reaching a part by Tab, but still let the script send focus there. To do that, use tabindex="-1". It tells the browser to skip the part when the user presses Tab.

<div tabindex="-1" id="box">Hidden content here</div>

This helps with modals or alerts. The page does not send focus to them unless a script says so.

Change the Form Flow

When you use a form, each field gets a spot in the tab order. But sometimes you want one field to come before another. You can set a number in tabindex to move fields as you like.

<input type="text" tabindex="2"> <input type="text" tabindex="1">

The second field will come first now. But this works best when the form has a short list. Too many numbers may break the flow.

Keep Focus Inside a Box

You can create a focus trap inside a part of the page. This ensures keyboard users stay inside a modal or dialog until it closes.

Set it on the box and return it to the first button when the user presses Tab after the last one. You need a script for the loop, but tabindex="0" makes the part focusable.

<div tabindex="0" id="popup"> 
  <button>Yes</button> <button>No</button> 
</div>

This helps when you show a pop-up or form. You want the user to stay inside it until the task ends.

Examples

Set Custom Tab Order for Form Fields:

<input type="text" tabindex="2" placeholder="Last Name">
<input type="text" tabindex="1" placeholder="First Name">
<input type="submit" value="Submit">

This example places the “First Name” field first. The browser moves to “Last Name” second. It skips natural order and follows the numbers.

Remove Item from Tab Flow:

<button>Save</button>
<button tabindex="-1">Cancel</button>

The “Cancel” button does not get focus when the user presses Tab. It still works with other actions like mouse click or script focus.

Add tabindex to Custom Element:

<div tabindex="0">Press Tab to focus this box</div>

Elements like <div> or <span> are not focusable by default. Use tabindex="0" to make them part of the tab order. This example allows the div to receive focus when you press Tab.

Control Focus in Interactive Widgets:

<div role="menu">
  <div role="menuitem" tabindex="0">Open</div>
  <div role="menuitem" tabindex="-1">Save</div>
  <div role="menuitem" tabindex="-1">Exit</div>
</div>

Only the first item gets focus at first. You can change focus with the arrow keys or JavaScript later. This helps when you build custom widgets.

Wrapping Up

In this article, you learned what the tabindex attribute does and how to use it. You also saw how it works with focus and keyboard flow.

Here is a quick recap:

• You can set tab order with tabindex.
• You can remove items from the tab chain.
• You can add focus to custom elements.
• Use it to help people who use keyboards.

FAQs

<button tabindex="1">First</button>
<button tabindex="2">Second</button>

<div tabindex="0">Focusable Div</div>

<div tabindex="0">Focusable by Tab</div>
<div tabindex="-1">Focusable by JS only</div>

<input type="text" tabindex="2">
<button tabindex="1">Click Me First</button>

Similar Reads