Ensure logical focus order

When focus jumps unexpectedly, keyboard users get disoriented and can't find content—mismatched visual and focus order makes navigation impossible.

Quick Reference

• Tab order should match visual reading order (left-to-right, top-to-bottom)
• DOM order determines tab order—arrange HTML to match visual layout
• Never use positive tabindex values (1, 2, 3)—they break natural flow
• Use CSS for visual positioning, not DOM reordering

Check

Tab through the page and verify focus moves in a logical sequence matching visual layout. Check that modals trap focus appropriately, and focus returns to triggering elements when dialogs close.

Fix

Order DOM elements to match visual layout. Avoid positive tabindex values which override natural order. Use tabindex='0' for custom interactive elements and tabindex='-1' for programmatic focus management.