Tabindex

Why It Matters

• Keyboard users depend on predictable focus order. People who navigate with a keyboard expect to move through a page in a logical sequence — typically top to bottom, left to right. Arbitrary tabindex values can send focus jumping across the page in confusing ways that break this expectation.
• It determines whether custom elements are focusable. A div or span acting as a custom button is not focusable by default. Adding tabindex="0" puts it into the natural tab order, making it reachable by keyboard. Without it, keyboard users simply cannot interact with the element.
• Screen readers follow focus order too. When a screen reader user tabs through a page, the order they encounter elements is driven by the tab sequence. A scrambled focus order means a scrambled reading experience.
• Misuse creates accessibility barriers. Positive tabindex values (like tabindex="5") override the natural order and create a maintenance nightmare. Adding or removing elements requires recalculating all the numbers, and getting it wrong leaves users stranded.

How to Use It Correctly

1. Rely on natural document order. Structure your HTML so that elements appear in the order you want them focused. If the visual layout matches the source order, you rarely need tabindex at all. Good HTML structure is the best focus management tool.
2. Use tabindex="0" for custom interactive elements. If you have built a custom widget using non-interactive HTML elements, add tabindex="0" to make it focusable in its natural position. This is the most common and safest use of tabindex.
3. Use tabindex="-1" for programmatic focus. Setting tabindex="-1" makes an element focusable via JavaScript but removes it from the tab order. This is useful for elements that should receive focus only in specific situations, like modal dialogs or error messages.
4. Avoid positive tabindex values. Values like tabindex="1", tabindex="2", or tabindex="99" force elements to the front of the tab order and create unpredictable navigation. The maintenance burden alone makes them not worth using.
5. Test with keyboard navigation. Tab through your entire page and verify that focus moves in a logical order. If you find yourself jumping to unexpected places, check for positive tabindex values or misplaced elements in the HTML source.

Common Mistakes

• Using positive tabindex values to "fix" focus order. If your focus order is wrong, the real fix is restructuring your HTML — not layering tabindex numbers on top. Positive values create fragile ordering that breaks whenever the page changes.
• Making non-interactive elements focusable without purpose. Adding tabindex="0" to a paragraph or heading puts it in the tab order, but keyboard users will tab to it and find nothing to do. Only make elements focusable if they do something when activated.
• Forgetting keyboard event handlers on custom elements. Adding tabindex makes an element focusable, but it does not automatically make it activatable. You also need to handle keypress events (Enter and Space) so keyboard users can actually trigger the element.
• Removing focus indicators. Making something focusable but hiding the focus outline with CSS defeats the purpose. Keyboard users need visible focus indicators to know where they are on the page.