Elements should not have tabindex greater than zero

WCAG 2.4.3
Focus Order

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Never use `tabindex` > 0. If focus feels wrong, fix the DOM — not the tabindex.

Why this matters and how to fix it

Why this matters

Keyboard and assistive technology users rely on a predictable, logical tab order. Positive tabindex values override the natural DOM order, causing focus to jump unpredictably. This can make controls hard to find or reach and may trap users in certain areas of the page.

How to fix this issue

Do not use `tabindex` values greater than 0. Use semantic HTML and DOM structure to determine tab order. Use `tabindex="0"` to add an element to the natural focus order and `tabindex="-1"` if an element should only be focusable programmatically (e.g., for modal focus management).

Automated detection · Manual review recommended

Developer guidance

Positive tabindex usually appears when developers try to fix a broken layout or simulate custom UI widgets. Instead: repair the DOM order, use real buttons/links, or use roving tabindex patterns in composite components. Add lint rules to prevent tabindex > 0.

Code examples

Incorrect Implementation

<button tabindex="5">Submit</button>
<input type="text" tabindex="2" placeholder="Name">

Correct Implementation

<button>Submit</button>
<input type="text" placeholder="Name">

Real-World Examples

Before

<div class="card" tabindex="3">
  <button tabindex="7">Open</button>
</div>
<!-- Focus order now jumps unpredictably between UI sections -->

After

<div class="card" tabindex="0">
  <button>Open</button>
</div>
<!-- Focus order follows reading order → predictable navigation -->

CSS Example (Guidance)

/* Style focus outlines instead of removing them */
:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

Manual testing

  1. 1. Press Tab repeatedly to navigate the page.
  2. • Expected: Focus follows visual and logical reading order.
  3. 2. If focus jumps unexpectedly, inspect affected elements for `tabindex`.
  4. 3. Check for `tabindex` values greater than 0 in markup or rendered DOM.
  5. 4. Replace positive tabindex with DOM order or use `tabindex="0"` when needed.
  6. 5. Re-test keyboard navigation after updates.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance