DOM order is not always keyboard order — I built a Chromium scanner to visualize it

Description and use

FocusPath is a tool that tracks the focus path during real Tab navigation in Chromium and produces an HTML report visualizing the actual keyboard traversal, uncovering hidden focus issues that static DOM analysis misses.

Problem

Keyboard navigation order cannot be reliably inferred from DOM order due to tabindex, JavaScript focus redirects, dialogs, shadow roots, cross‑origin frames, and scrolling, making it hard to observe actual focus traversal.

Outcome

FocusPath provides a deterministic, evidence‑based visualization of keyboard focus traversal, revealing hidden focus behaviors that static analysis misses and enabling more accurate accessibility reviews.

Workflow

• Run FocusPath CLI against a target URL (e.g., npx focuspath https://example.com).
• Optionally set viewport, direction, or traversal limits via CLI flags.
• FocusPath captures each focus stop, screenshots, and metadata.
• Generate an HTML report with generateHtmlReport or via the CLI output.
• Review the report to see the focus route, element details, and traversal reasons.
• Integrate FocusPath into automated workflows or manual review cycles.
• Combine with rule engines for comprehensive accessibility testing.

Evidence

FocusPath follows Tab or Shift+Tab navigation in a real Chromium session, records the observable focus stops, and generates a portable HTML report with the route drawn over the page.

Source

The report also explains why traversal ended: the document was exhausted, focus stopped moving, a cycle appeared, or a configured safety budget was reached.

Source