Keyboard Navigation Highlighter

WHAT IT DOES

Keyboard Navigation Highlighter is a browser extension that enhances keyboard navigation by adding a visible, high-contrast focus indicator to the currently focused element. When navigating a webpage using the keyboard (Tab, Shift+Tab, arrow keys, etc.), the focused element is highlighted with a custom outline or ring that you can fully customize. You can choose the color, style (solid, dashed, dotted, or double), and thickness (1-8px) of the focus indicator. You can also apply the indicator to all elements or only focusable elements, and enable a subtle glow effect for improved visibility. Settings are saved per website. The tool is ideal for users with visual impairments, keyboard-only users, developers testing keyboard accessibility, and anyone who wants a more visible focus indicator on web pages.

WHERE IT RUNS

Keyboard Navigation Highlighter runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override focus styles. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the focus highlighting. Use the color picker to select a focus indicator color. Choose the style from the dropdown (Solid, Dashed, Dotted, or Double). Adjust the thickness using the slider (1-8px). Toggle "Apply to all elements" to apply the indicator to all elements, or disable it to apply only to focusable elements (links, buttons, inputs, etc.). Toggle "Enable glow effect" to add a subtle glow around the focused element. Click the "Reapply" button to manually refresh the focus styles. All settings are saved per website, so your preferences persist across visits.

REAL MECHANISM — WHY THIS WORKS

Most websites use default browser focus outlines that are often faint, low-contrast, or even removed entirely by CSS. Keyboard Navigation Highlighter uses a high-specificity CSS injection approach to override default focus styles. The tool injects a style element with !important rules that apply custom outline properties to the :focus pseudo-class. The selectors target either all elements (*) or focusable elements (a, button, input, textarea, select, details, summary, [tabindex], [contenteditable]) based on user preference. The tool also targets :focus-visible for modern browsers that support it, ensuring compatibility. The glow effect is achieved using box-shadow with multiple layers of the selected color at various opacities, creating a soft halo effect. The tool also adds a z-index to focused elements to ensure they appear above other content. The focus styles are reapplied whenever the user changes settings, and the tool saves the preferences in GM_setValue for persistence. This approach ensures consistent, visible, and fully private focus highlighting without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, color, style, thickness, apply-all setting, and glow setting—are saved per domain for a seamless experience.

PLEASE NOTE

Keyboard Navigation Highlighter requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool uses CSS !important rules, which may conflict with page styles that also use !important. The focus indicator is visible only when the element is focused via keyboard or programmatically—it does not apply on mouse focus. The glow effect uses box-shadow, which may not be supported in very old browsers. All settings are stored locally in your browser using GM_setValue. No focus data, page content, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.