What is Tabindex in HTML
The tabindex attribute in HTML controls the order in which elements receive focus when users navigate a page using the keyboard (usually with the Tab key). It improves accessibility by helping users who rely on keyboard navigation.
tabindex="0"– Puts the element in the natural tab order, based on the document flow.tabindex="-1"– Makes the element focusable only with JavaScript (not via Tab key), often used for modals or skip links.tabindex="1"or higher – Explicitly sets a custom tab order, but this is discouraged because it can create confusing navigation.
By default, only interactive elements (like links, buttons, and inputs) are focusable. The tabindex attribute lets developers include non-interactive elements (like <div> or <span>) in the focus order if needed.
Use
tabindex="0"to make custom components (e.g., a custom button built with a <div>) accessible.Avoid positive values (
tabindex=1or higher), as they override the natural flow and can disorient users.Use
tabindex="-1"for elements that should be focusable programmatically but skipped in normal tabbing.
In short, tabindex gives developers control over keyboard navigation, which is critical for accessibility, but it should be used carefully to avoid creating confusing or inconsistent focus order.