Screen Reader Landmark Highlighter

WHAT IT DOES

This script highlights ARIA landmarks and HTML5 structural elements on any webpage, making it easy to visualize the page's accessibility structure. It identifies regions like main, navigation, complementary, contentinfo (footer), search, banner (header), form, and region. Each landmark is highlighted with a colored border and a badge showing its role (e.g., "Main," "Navigation," "Search"). A list of all landmarks appears in the settings panel—click any item to scroll to that landmark on the page. You can customize the highlight color for each landmark type individually. The script updates dynamically as the page changes, making it useful for accessibility testing, development, and learning how pages are structured for screen reader users.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with ARIA landmarks or HTML5 structural elements. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable landmark highlighting" toggle enables or disables the highlighting.

- The "Landmarks Found" section shows a list of all landmarks on the page. Click any item to scroll to that landmark.

- Customize colors for each landmark type using the color pickers in the "Custom Colors" section.

- Click "Refresh landmarks" to manually re-scan the page.

- Click "Reset colors" to restore the default color scheme.

The highlighting appears automatically when enabled. Each landmark has a colored border and a badge showing its role.

TECHNICAL SECTION — REAL MECHANISM

The script detects landmarks by scanning for ARIA role attributes (main, navigation, complementary, contentinfo, search, banner, form, region) and HTML5 structural elements (header, footer, nav, main, aside, form, section, article). It uses document.querySelectorAll to find elements with these roles and tags. For HTML5 elements, it maps them to their corresponding ARIA roles (e.g., header → banner, footer → contentinfo, nav → navigation). The script checks for parent-child relationships to avoid duplicate highlighting of nested elements. Each landmark is highlighted using style properties: a 3px colored outline with offset, and a badge inserted as an absolute-positioned span. The badge is added to the parent element's DOM using appendChild (never innerHTML). A WeakSet tracks processed elements to avoid duplicate work. The landmark list is generated by iterating through the detected landmarks and creating clickable list items that scroll to each element using scrollIntoView. A MutationObserver watches for DOM changes and re-scans the page when new content is loaded.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings and color preferences save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The script highlights landmarks visually—it does not modify the page's accessibility tree or ARIA attributes. Some pages may have many landmarks, which can make the page look cluttered. The script may not detect landmarks that are dynamically loaded via JavaScript after the initial page load; use the "Refresh landmarks" button to re-scan. The script stores only your preferences and custom colors via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.