Skip to content

Why positive tabindex values break tab order

Accessibility1 min readFixes check tab-order-trap

tabindex above 0 pulls elements out of the natural keyboard order and confuses everyone who tabs. Use 0 or -1 only.

Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

What a passing site looks like

  • The natural tab order is not changedinfo onlyeffort M

Tab order

Why it matters. Positive tabindex values force keyboard focus to jump around the page in an order that does not match what is on screen, which is disorienting for keyboard and switch users.

How to fix it.
  1. Remove tabindex values above 0; use tabindex="0" to make custom controls focusable and tabindex="-1" for focus targets.
  2. Order elements in the HTML the way they appear on screen so the natural tab order is right.

Filed under Accessibility. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.