Last updated: August 25, 2026.
Keyboard focus normally follows the order of interactive elements in the HTML source. The most accessible way to control tab order is to place fields, links, and buttons in a logical document order.
Use natural source order
<form>
<label for="name">Name</label>
<input id="name" name="name">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Send</button>
</form>Use tabindex only when necessary
| Value | Behavior |
|---|---|
tabindex="0" | Adds a custom element to the natural focus order. |
tabindex="-1" | Allows scripted focus but removes the element from sequential keyboard navigation. |
| Positive number | Creates a separate priority order and should generally be avoided. |
<div id="validation-summary" tabindex="-1" role="alert"></div>CSS visual reordering does not necessarily change keyboard order. Test the complete page using only Tab, Shift+Tab, Enter, Space, and arrow keys. The MDN tabindex reference explains focus behavior and accessibility concerns.
