Keyboard-Only Navigation Path Highlighter

WHAT IT DOES

Keyboard-Only Navigation Path Highlighter scans the current page for interactive elements (links, buttons, form inputs, tabindex attributes) and tracks keyboard navigation focus order. The floating panel shows the focus path history, with a visual highlight trail following the user's keyboard navigation (Tab, Shift+Tab, arrow keys). A log of focused elements shows their roles, labels, and positions in the tab order. Skipped elements, elements missing focus indicators, and focus traps are highlighted. Suggestions for improving keyboard navigation are provided based on focus patterns, including missing tabindex attributes and focus order issues. Export focus path data as JSON or text for accessibility auditing.

WHERE IT RUNS

Works on any web page, including single-page applications, forms, navigation menus, and complex UI components. The script detects interactive elements using standard web accessibility heuristics and tracks focus events in real-time. It works best on pages with keyboard-accessible interfaces and can help identify accessibility issues in any web application.

HOW TO USE

The panel displays a log of all focus events as you navigate with the Tab key. A colored highlight trail follows your focus, making it easy to see which element is currently active. Use "Scan Interactive Elements" to see all focusable elements on the page. The Analysis section shows focus statistics, identifies potential focus traps (same element focused repeatedly), and detects elements missing visible focus indicators. Copy the focus path log as text for documentation, or export as JSON for analysis. Toggle auto-capture to control whether highlights appear, and adjust highlight duration in settings.

MECHANISM — FOCUS EVENT TRACKING WITH ELEMENT ANALYSIS

The script listens for focusin events on the page and captures each focused element. For each focus event, it extracts the element's role (link, button, textbox, combobox, etc.), label (from aria-label, aria-labelledby, title, or text content), and tabindex value. The focus history is stored locally and displayed in the log. The highlight trail creates a visual border around the focused element that pulses and fades after a configurable duration. The analysis engine detects focus traps by identifying patterns where the same element receives focus multiple times consecutively. Missing focus indicators are identified by checking computed styles for outline visibility. All analysis runs client-side with no network calls.

THE PANEL

The floating panel is fully draggable and remembers its position per domain. Click the minimize button to collapse it to a small bubble, or press Escape to hide it. The panel automatically adjusts to different screen sizes and can be resized to show more content. All settings, including highlight duration and analysis preferences, are saved per domain. The panel integrates smoothly with any page layout using the BGPanel framework, maintaining clean separation from page content.

PLEASE NOTE

This script requires the free BotGentz extension to run. It does not send any data to external servers; all focus history and settings remain entirely local to your browser using GM_setValue. The script never reads password fields, hidden inputs, or file inputs. It stores only element roles, labels, tabindex values, and timestamps from publicly visible page content. The script does not modify the page; it only observes and highlights focus events. Focus highlighting uses visual overlays that do not interfere with page interactions. Data persists across browser sessions and is isolated per browser profile.