Tab / Focus Order Visualizer
Compute and list the keyboard Tab order of focusable elements in an HTML snippet.
About this tool
Paste an HTML snippet and this tool lists every focusable control in the exact order a keyboard user would Tab through them, applying the real positive-then-natural tabindex rules. It also separates programmatically focusable (tabindex="-1") elements and warns about positive tabindex anti-patterns. Useful for developers and QA checking keyboard navigation.
Frequently asked questions
How is keyboard tab order calculated?
Elements with a positive tabindex come first, in ascending tabindex order (ties broken by source order), followed by elements with tabindex="0" or that are naturally focusable, in document order. Elements with tabindex="-1" are skipped by Tab and listed separately.
Which elements count as focusable?
Links with href, <button>, <input> (except type=hidden and disabled), <select>, <textarea>, and any element carrying a tabindex attribute.
Why is a positive tabindex flagged as a problem?
A positive tabindex pulls the element ahead of everything in the natural DOM order, which almost always produces a confusing, hard-to-maintain focus sequence. Use tabindex="0" and order elements correctly in the markup instead.