Tabindex

`tabindex` is a global HTML attribute that determines whether an element can receive keyboard focus and where it falls in the tab navigation sequence. When a user presses the Tab key, the browser moves focus through focusable elements in a specific order. `tabindex` gives developers control over which elements participate in this navigation and, in limited cases, their order. By default, only interactive HTML elements are focusable: links with `href` attributes, buttons, form inputs, selects, textareas, and elements with `contenteditable`. Non-interactive elements like `<div>`, `<span>`, `<p>`, and `<h1>` are not in the tab order. `tabindex` can change this behavior. The attribute accepts integer values, and each value range has distinct behavior: negative values (typically -1), zero, and positive values (1 and above). Understanding these three categories is fundamental to accessible keyboard navigation.

Keyboard accessibility is a cornerstone of web accessibility. WCAG Success Criterion 2.1.1 (Keyboard) requires that all functionality be operable through a keyboard interface. When custom interactive components are built with non-interactive elements, they are invisible to keyboard navigation unless `tabindex` makes them focusable. A custom dropdown built with `<div>` elements will never receive keyboard focus without `tabindex`. A user pressing Tab will skip right over it, making the component completely inoperable without a mouse. Adding `tabindex="0"` to the appropriate elements brings them into the tab order and begins making the component keyboard accessible. Conversely, misusing `tabindex` with positive values can severely damage navigation. It creates unpredictable tab sequences where focus jumps around the page in an order disconnected from the visual and DOM layout. WCAG Success Criterion 2.4.3 (Focus Order) requires that navigation sequences preserve meaning and operability, which positive `tabindex` values frequently violate.

**tabindex="0"** places the element in the natural tab order based on its position in the DOM. This is the most commonly used value. The element becomes focusable via the Tab key and via JavaScript, and it appears in the tab sequence exactly where it sits in the source code. ```html <!-- Custom button using a div --> <div role="button" tabindex="0" onclick="handleClick()"> Click Me </div> ``` **tabindex="-1"** removes the element from the tab order but allows it to receive focus programmatically via JavaScript's `element.focus()`. This is essential for focus management scenarios: moving focus to headings after navigation, managing focus within composite widgets, or focusing elements that shouldn't be tab stops. ```html <!-- Heading that receives focus after route change --> <h1 tabindex="-1" id="page-title">Dashboard</h1> <script> // After navigation, move focus to the heading document.getElementById('page-title').focus(); </script> ``` **Positive tabindex (1, 2, 3...)** creates a custom tab order. Elements with positive values receive focus before any elements with `tabindex="0"`, ordered by their numeric value. Elements with the same positive value are ordered by DOM position. This sounds useful in theory but is an anti-pattern in practice. Positive `tabindex` values: - Override the natural, predictable DOM order. - Become impossible to maintain as pages grow and change. - Create confusion when mixed with the natural tab order. - Are flagged as accessibility issues by automated testing tools. **Best practices:** - **Use native interactive elements** whenever possible. A `<button>` is always better than a `<div tabindex="0" role="button">`. - **Use `tabindex="0"` sparingly** and only for custom interactive elements that have no native equivalent. - **Use `tabindex="-1"` for programmatic focus.** Headings, error summaries, modal containers, and other elements that need focus management but shouldn't be tab stops. - **Never use positive `tabindex` values.** Restructure your DOM order instead. - **Remember that `tabindex` alone doesn't make a custom element accessible.** You still need appropriate roles, keyboard event handlers, and ARIA states. ```html <!-- Complete custom checkbox example --> <div role="checkbox" tabindex="0" aria-checked="false" aria-label="Subscribe to newsletter" onkeydown="if(event.key===' ') toggleCheckbox(this)" onclick="toggleCheckbox(this)" ></div> ``` The `tabindex` attribute applies to the accessibility tree as well. Elements with `tabindex="0"` or `tabindex="-1"` become part of the focus management system that assistive technologies rely on.