Avoid tabindex > 0

ZMD017

Prevent use of positive tabindex values; use 0 or -1 and rely on DOM order for keyboard navigation.

✅ Good

<button tabindex="0">Next</button>

❌ Bad

<button tabindex="2">Next</button>

When: An element has a tabindex attribute above 0

Warning: Tabindex greater than 0 should be avoided

Solution: Use 0 or -1 and manage tab order with DOM structure

Why it matters

Accessibility: Positive tabindex values cause elements to receive focus out of document order, confusing keyboard users :contentReference[oaicite:19]{index=19}.

SEO: Non-standard focus order can lead to poor user engagement metrics, indirectly impacting SEO.

In brief

  • Goal: Maintain logical, predictable focus order.
  • What to do: Replace tabindex>0 with tabindex="0" or -1, and reorder DOM if necessary.
  • Why: Positive tabindex values break natural tab sequence and hurt keyboard users.

Intent

Enforce standard focus navigation by discouraging arbitrary tab order overrides.

Benefits

  • Keyboard users navigate in document order, reducing confusion :contentReference[oaicite:18]{index=18}.
  • Assistive technologies rely on a predictable focus model.

Techniques

  • F44: Avoid failure of Success Criterion 2.4.3 due to use of positive tabindex.

HTML Semantics

The tabindex attribute defines focus order; positive values reprioritize elements ahead of those without tabindex.

References

Tips & edge cases

  • Refactor DOM order instead of relying on positive tabindex values :contentReference[oaicite:20]{index=20}.
  • Use tabindex="-1" for programmatic focus without adding to tab sequence.

See also