Tabindex

What it is

The `tabindex` attribute tells a browser how an element should behave when a user presses the Tab key to navigate a page by keyboard. A value of `0` means "include this element in the normal tab order," while a value of `-1` means "exclude it from tab order but allow programmatic focus." A positive value — like `tabindex="1"`, `tabindex="2"`, etc. — forces that element to be focused *before* everything else on the page, regardless of where it sits in the HTML. This almost always creates a confusing, broken keyboard experience because the visual order and the focus order no longer match.

Why it matters

Keyboard navigation is essential for people who cannot use a mouse — including users with motor disabilities, screen-reader users, and power users who rely on the Tab key. When positive tabindex values are present, focus jumps unpredictably around the page, making it nearly impossible for these shoppers to browse products, fill in forms, or complete a checkout. This violates WCAG 2.1 Success Criterion 2.4.3 (Focus Order) at Level AA — the standard that most accessibility laws (ADA, European Accessibility Act, UK Equality Act) reference. Failing it exposes your business to legal complaints and litigation, and it directly harms conversion rates by locking out an estimated 15–20% of online shoppers who have some form of disability.

How to fix it

1. Audit your pages using your browser's DevTools: open the Elements/Inspector panel and search the HTML for 'tabindex' to find every instance. Note any value greater than 0.
2. For each element with a positive tabindex, decide whether it truly needs to be in the tab order. If it is a naturally focusable element (link, button, input, select, textarea), simply remove the tabindex attribute entirely — the browser will handle it correctly.
3. If the element is not natively focusable (e.g. a <div> or <span> acting as an interactive control) and must be reachable by keyboard, change its tabindex to '0' so it joins the normal document-order tab sequence.
4. Reorder the elements in your HTML source to match the visual/logical reading order, so that the natural tab sequence makes sense without needing any positive tabindex values.
5. Use tabindex='-1' only when you need to move focus programmatically via JavaScript (e.g. opening a modal) but do not want the element in the standard tab flow.
6. Verify the fix by tabbing through the entire page with only a keyboard: focus should move top-to-bottom, left-to-right in a logical order that matches what a sighted user would read, with no unexpected jumps.

<![CDATA[<!-- ❌ WRONG: positive tabindex breaks focus order -->
<button tabindex="3">Add to Cart</button>
<a href="/sale" tabindex="1">View Sale</a>
<input type="email" tabindex="2" placeholder="Your email">

<!-- ✅ CORRECT: remove attribute or use 0; rely on document order -->
<a href="/sale">View Sale</a>
<input type="email" placeholder="Your email">
<button>Add to Cart</button>

<!-- ✅ CORRECT: non-native interactive element added to normal tab flow -->
<div role="button" tabindex="0" onclick="openMenu()">Menu</div>

<!-- ✅ CORRECT: focus target for JS only, not in tab flow -->
<div id="modal-heading" tabindex="-1">Special Offer</div>
]]>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN