Last updated
What Is Tab Order?
Tab order is the sequence in which interactive elements receive keyboard focus when the user presses the Tab key. Correct tab order is critical for keyboard accessibility — users who cannot use a mouse rely on Tab to navigate forms, menus, and interactive content. The default tab order follows the DOM order (top to bottom, left to right in the source code).
tabindex Attribute
| Value | Behavior |
|---|---|
tabindex="0" | Element is focusable in natural DOM order |
tabindex="-1" | Focusable via JavaScript only, not Tab key |
tabindex="1" (positive) | Focused before tabindex="0" elements — avoid this |
Visualizing Tab Order with JavaScript
JavaScript
function visualizeTabOrder() {
// Get all focusable elements in DOM order
const focusable = Array.from(document.querySelectorAll(
'a[href], button:not([disabled]), input:not([disabled]), ' +
'select:not([disabled]), textarea:not([disabled]), ' +
'[tabindex]:not([tabindex="-1"])'
));
// Sort by tabindex (positive values first, then 0)
focusable.sort((a, b) => {
const ta = parseInt(a.getAttribute('tabindex') || '0');
const tb = parseInt(b.getAttribute('tabindex') || '0');
if (ta > 0 && tb > 0) return ta - tb;
if (ta > 0) return -1;
if (tb > 0) return 1;
return 0;
});
// Add numbered badges
focusable.forEach((el, i) => {
const badge = document.createElement('span');
badge.textContent = i + 1;
badge.style.cssText = 'position:absolute;background:#E74C3C;color:white;' +
'border-radius:50%;width:20px;height:20px;font-size:11px;' +
'display:flex;align-items:center;justify-content:center;z-index:9999;';
el.style.position = 'relative';
el.appendChild(badge);
});
}
ℹ️
Never use positive tabindex values (tabindex="1", "2", etc.) — they create a separate tab sequence that runs before the natural DOM order, making navigation confusing. Use tabindex="0" to add elements to the natural order.