What is the HTML tabindex attribute?

The tabindex attribute is a global attribute in HTML that defines the tab order for elements during keyboard navigation. Using tabindex, developers can control the sequence in which users navigate between elements on the page using the keyboard (typically the Tab key).

Purpose:

1. Enhancing Accessibility: By setting tabindex, developers can improve website accessibility, making it more user-friendly for keyboard navigation, especially for users who cannot use a mouse.
2. Customizing Navigation Order: Sometimes the order of elements in the interface does not align with logical or intuitive navigation, and tabindex can be used to customize this sequence.
3. Including Non-Interactive Elements: By default, certain elements such as div or span are not included in keyboard navigation. By setting tabindex, these elements can be incorporated into the tab order, which is valuable for creating rich interactive applications.

Example:

Consider a form where users are expected to navigate in a specific sequence:

html
<input type="text" placeholder="Enter your first name" tabindex="1">
<input type="text" placeholder="Enter your last name" tabindex="3">
<input type="text" placeholder="Enter your email" tabindex="2">
<button type="submit" tabindex="4">Submit</button>

In this example, the user first focuses on the 'first name' input field, then the 'email' input field (because its tabindex is set to 2), followed by the 'last name' input field, and finally the submit button. This setup guides users to fill out the information in the expected sequence, enhancing the user experience.