Positive tabindex values: why they break keyboard navigation
A positive tabindex value (tabindex="1", "2", etc.) forces an element to the front of the tab order and breaks the natural document flow. Use tabindex="0" to make a non-interactive element focusable, or tabindex="-1" to remove it from the tab order entirely — never positive integers.
A positive tabindex value (tabindex="1", "2", etc.) forces an element to the front of the tab order and breaks the natural document flow. Use tabindex="0" to make a non-interactive element focusable, or tabindex="-1" to remove it from the tab order entirely — never positive integers. The tabindex attribute controls keyboard focus order. Value 0 means "include in natural order"; -1 means "focusable by script but skipped by tab"; positive integers explicitly override the order, jumping focus around the page in confusing ways.
Last updated·
What it is
The tabindex attribute controls keyboard focus order. Value 0 means "include in natural order"; -1 means "focusable by script but skipped by tab"; positive integers explicitly override the order, jumping focus around the page in confusing ways.
Why it matters
Keyboard users tab through pages in document order. A positive tabindex breaks that, hiding focus indicators and skipping interactive elements. It's a WCAG 2.4.3 failure and a major accessibility regression.
How to fix it
- Replace positive tabindex with 0. Search the codebase for tabindex="[1-9]". Replace with tabindex="0" so the natural document order is preserved.
- Reorder the DOM if focus order is wrong. The fix for wrong focus order is to move the element to the right place in HTML, not to override with tabindex.
- Audit with axe DevTools. The "tabindex" rule flags every positive value.
Authoritative sources
- Google Search Central documentation — Google
- Schema.org vocabulary — schema.org
- SEO Starter Guide — Google Search Central
- MDN — HTML meta and link elements — Mozilla MDN