Skip Link Adder

WHAT IT DOES

Skip Link Adder is a browser extension that adds a "Skip to main content" link to the top of any webpage, allowing keyboard users to bypass navigation menus and jump directly to the main content area. The link is visually hidden until it receives keyboard focus (e.g., when a user presses the Tab key), at which point it becomes visible and accessible. This improves keyboard navigation efficiency and accessibility for users who rely on keyboard-only browsing, including those with motor disabilities, visual impairments, or power users who prefer keyboard navigation. You can customize the link text and the target selector to match different page structures, and the setting is saved per website.

WHERE IT RUNS

Skip Link Adder 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 a skip link into the page DOM. 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 skip link. To customize the link text, enter your preferred text in the "Link text" field and click Apply. To change the target element, enter a CSS selector in the "Target selector" field (e.g., "main", "#content", ".main-content") and click Apply. Click the "Reapply" button to manually re-add the skip link if it was removed by page changes. When enabled, the skip link appears at the top-left corner of the page. It is hidden until you press the Tab key, then becomes visible. Pressing Enter on the link scrolls to the main content and focuses the target element. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most websites either lack skip links or have them implemented inconsistently. Skip Link Adder uses a DOM-injection approach to add a skip link with proper accessibility attributes. The tool creates an anchor element with a href pointing to the target element's ID. If the target element doesn't have an ID, the tool generates one. The link is styled with position: fixed, placed at the top-left corner, and hidden using transform: translateY(-100%). When the link receives focus via the :focus pseudo-class (triggered by keyboard navigation), a CSS transition reveals it. The click handler prevents default navigation and instead uses scrollIntoView or window.scrollTo with smooth behavior to scroll to the target, then sets focus on the target element. The target element is given tabindex="-1" temporarily to allow programmatic focus, then removed to prevent focus trapping. The link also includes aria-label for screen reader compatibility. The tool uses a MutationObserver to reapply the link if the DOM changes significantly. This approach ensures reliable, accessible, and fully private skip link functionality 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, link text, and target selector—are saved per domain for a seamless experience.

PLEASE NOTE

Skip Link Adder 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 adds a skip link that is visible only on focus; it does not modify existing page navigation. The target selector uses CSS selectors and falls back to the largest text container if no match is found. The tool may not work correctly on pages with complex or dynamic content loading. All settings are stored locally in your browser using GM_setValue. No page content, skip link data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only injects a skip link at your request.