Documentation/Avoid tabindex > 0

Avoid tabindex > 0

ZMD017

ZemDomu reports a static tabindex value greater than zero. Keep keyboard focus aligned with DOM order, use tabindex="0" only when a custom element must join the natural sequence, and use tabindex="-1" for programmatic focus.

What this rule catches

  • Supported elements with a positive static tabindex value.
  • Literal focus-order overrides that move elements ahead of the natural document sequence.

What static analysis cannot prove

  • Static analysis cannot prove that DOM order matches the visual and logical reading order.
  • It cannot test focus movement, keyboard traps, modal focus management, or values computed at runtime.

Standards classification and detection confidence

Classification
advisory — The rule rejects positive tabindex values because they commonly create a focus order that diverges from document order.
Detection confidence
high — A positive static numeric value is deterministic. Whether the complete focus order is logical still requires keyboard testing in rendered states.

Applicable WCAG 2.2 criteria

Criterion 2.4.3 requires a focus order that preserves meaning and operability; it does not categorically prohibit every positive tabindex value.

Normative means the rule checks a machine-testable part of a cited standards requirement. Advisory means it enforces a documented authoring convention or supporting technique. Neither classification makes a ZemDomu result proof of WCAG conformance.

Examples

✅ Good

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

❌ Bad

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

React and Vue notes

React/TSX
Use tabIndex in JSX and TSX; verify custom widgets against their keyboard interaction pattern in the rendered application.
Vue
Use tabindex in Vue templates; verify custom widgets and dynamically bound values in the rendered application.

Quick summary

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.

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

Rule details

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.
  • 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.
  • Use tabindex="-1" for programmatic focus without adding to tab sequence.

See also

Related guides

Last verified: