Tab Order

Visualize keyboard tab order, detect focus management issues, and get recommendations.

Free & unlimitedWorks offline

HTML to analyze

All processing happens in your browser. No data is sent to any server.

About this tool

1
Paste your HTML
Enter the HTML of a page or component to map out which elements receive keyboard focus and in what order.
2
View the tab sequence
See a numbered overlay on each focusable element showing the exact order a keyboard user would navigate.
3
Identify issues
Spot problems like skipped elements, illogical ordering caused by positive tabindex values, or hidden focusable elements.
4
Fix the order
Follow the recommendations to restructure your HTML source order or correct tabindex values.

Never use positive tabindex values (tabindex="1", "2", etc.) - they override the natural DOM order and create confusing navigation.
Use tabindex="0" to make custom interactive elements focusable and tabindex="-1" for elements that should only be programmatically focused.
The tab order should follow the visual reading order: left-to-right, top-to-bottom for LTR languages.
Ensure modal dialogs trap focus within them and return focus to the trigger element when closed.

Numbered visual overlay showing the keyboard tab sequence through all focusable elements
Detection of positive tabindex values that disrupt natural tab order
Hidden element warnings for off-screen or display:none focusable elements
Focus trap analysis for modals and dialog components

Verify that a form can be completed entirely with keyboard navigation
Audit a complex dashboard layout for logical keyboard navigation flow
Test modal and dropdown components for proper focus trapping behavior
Validate that newly added interactive elements are keyboard accessible

Links (<a> with href), buttons, form inputs, textareas, selects, and elements with tabindex="0" or a positive tabindex are focusable by default.

Set tabindex="-1" to remove it from the keyboard tab sequence. The element can still receive focus programmatically via JavaScript focus() calls.

Tab order follows the DOM source order, not CSS visual positioning. If elements are visually reordered with CSS (flexbox order, grid, or absolute positioning), the tab order may diverge.