tabindex Values Greater Than 0: Fix Keyboard Focus Order

What the warning means

A positive tabindex value such as tabindex 1 or tabindex 5 creates a custom focus order ahead of elements that follow the normal document order. This order is difficult to maintain and can be confusing when the visual layout, DOM order, and keyboard order no longer match.

Use semantic interactive elements and a logical DOM order first. MDN recommends using only tabindex 0 and tabindex -1 when tabindex is needed.

What each value does

• No tabindex: native interactive elements follow document order.
• tabindex 0: adds an otherwise focusable custom element to the normal document order.
• tabindex -1: removes an element from sequential keyboard navigation but still allows focus through JavaScript.
• A positive value: forces the element into a custom priority order and should normally be removed.

Preferred implementation

<button type="button">Open filters</button>
<a href="/reports/">View reports</a>
<input name="keyword" type="search">

Native controls already provide keyboard behavior, roles, states, and focusability. A div with tabindex 0 does not automatically behave like a button.

How to fix positive values

1. Search templates and rendered HTML for tabindex values greater than 0.
2. Reorder the DOM so interactive elements follow the intended reading and visual sequence.
3. Remove the positive values and let native elements use document order.
4. Use tabindex 0 only when a custom widget must participate in sequential navigation.
5. Use tabindex -1 for programmatic focus, such as moving focus to a dialog heading or validation summary.
6. Follow established focus-management patterns for dialogs, menus, tabs, and composite widgets.

Layout and component pitfalls

CSS grid and flex order can visually move elements without changing keyboard order. Portals and fixed overlays can also place a component somewhere unexpected in the DOM. Reusable components should not assign positive values because they cannot know the final page order.

Test the result

Start at the browser chrome and press Tab and Shift+Tab through the entire page. The focus indicator should remain visible, the order should match the reading flow, and no control should become unreachable. Test modals and menus for focus entry, containment where required, and focus return.

Read the MDN reference for the tabindex global attribute for the platform behavior and accessibility warning.