Focus Order Checker
Find positive tabindex values, unreachable controls and elements made focusable that should not be.
About this tool
Lists everything on a page that can receive keyboard focus, in the order it will be reached, and flags what breaks that order.
**A positive `tabindex` is the fault worth finding.** Any element with `tabindex="1"` or higher jumps to the front of the tab order for the entire page — ahead of the skip link, the logo, the navigation, everything. One attribute on a search box, added to make it "first", moves it in front of the page's own beginning. Nothing looks different and nobody notices unless they navigate by keyboard.
**A div with a click handler and no tabindex** is the mirror image: a control a mouse can operate and a keyboard cannot reach at all. It looks and behaves like a button to everybody testing with a mouse.
Also flagged: elements given `tabindex="0"` that were already focusable, which does nothing, and `tabindex` on something with no interactive purpose, which adds a stop in the tab order that leads nowhere.
Common questions
What is wrong with a positive tabindex?
It moves the element ahead of everything with a natural tab order, for the whole page. One of them reorders the page; several of them create an order nobody can predict, including the person who wrote them.
When should I use tabindex="0"?
On a custom control built from a div or a span, to put it in the natural tab order where it sits. On anything already focusable it does nothing.
What is tabindex="-1" for?
Making something focusable by script but not by tabbing. It is what a skip link target needs, and what a modal needs so focus can be moved into it.
How do I make a div behave like a button?
Use a button. If you genuinely cannot, it needs tabindex="0", role="button", and key handlers for both Enter and Space — which is three things a button gives you for nothing.