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

说明与用途

FocusPath 是一个工具，能够在 Chromium 浏览器中实时跟踪 Tab 键导航的焦点路径，并生成可视化的 HTML 报告，揭示静态 DOM 分析无法发现的隐藏焦点问题。

问题

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.

结果

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.

工作流

• 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.

证据

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.

来源

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

来源