Tab Order Visualizer
Free to download on every platform. Comes pre-installed on BotFone, BotPad and BotFlip — with extra free apps included.
About this app
WHAT IT DOES
Tab Order Visualizer overlays sequential number labels on every focusable and interactive element within the current webpage. Each label shows the element's position in the natural tab order, making it immediately obvious which elements receive focus and in what sequence. The currently focused element is highlighted with a distinct outline and its label is emphasized with a contrasting color. Elements with positive tabindex values are rendered in a separate color, clearly distinguishing manually assigned tab order from the default document order. The overlay state and highlight color preference persist globally using GM_setValue, so your settings remain across browsing sessions.
WHERE IT RUNS
This script runs on any webpage matching *://*/*, meaning it works across virtually all standard websites. It operates entirely within the context of a single page and does not access browser tabs, bookmarks, history, or downloads. There is no chrome.* or browser.* API usage, making it fully compatible with the BotGentz userscript environment. The script respects all standard focusable element selectors including links, buttons, input fields, select dropdowns, textareas, iframes, contenteditable regions, draggable elements, and any element with a tabindex attribute.
HOW TO USE
After installation, the script automatically builds the overlay if previously enabled. Use the panel button "Show Tab Order" to toggle the overlay on or off. Alternatively, press Ctrl+Shift+T (or Cmd+Shift+T on macOS) to toggle the overlay from anywhere on the page without opening the panel. When active, numbered labels appear slightly above each focusable element, following the exact tab order. The "Refresh" button rebuilds the overlay to account for dynamic content changes. The "Copy Tab Order" button generates a report of all focusable elements in sequence, including tag name, ID, class, tabindex value, and text snippet, then copies it to your clipboard using GM_setClipboard. A color picker lets you customize the highlight color for focused elements, which
PLEASE NOTE
Sites and services change over time and this app may need updating to match.