Landmark Region Highlighter

WHAT IT DOES

Landmark Region Highlighter is a browser extension that scans any webpage for ARIA landmark regions and highlights them with colored borders. Landmarks include main, navigation, search, complementary, contentinfo, banner, form, and region roles. Each landmark is displayed with a color-coded border and a label showing its role. The tool also provides a list of all found landmarks with their roles and labels, helping you understand the page structure and identify missing or incorrectly used landmarks. You can toggle the feature on or off and control whether highlights are shown. The tool is ideal for web developers, accessibility testers, designers, and anyone who wants to ensure proper ARIA landmark usage.

WHERE IT RUNS

Landmark Region 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, scanning the DOM for landmark elements. 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 highlighter. Toggle "Highlight landmarks on page" to show or hide the colored borders. The panel displays a count of found landmarks and a list of each landmark with its role and label. Click any landmark in the list to scroll to that element on the page. Click the "Scan Page" button to manually rescan for landmarks. The tool automatically rescans when the page content changes. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most landmark detection tools require manual inspection of the DOM or use complex auditing frameworks. Landmark Region Highlighter uses a DOM-scanning approach that identifies landmarks based on both ARIA roles and HTML5 sectioning elements. The tool queries all elements on the page and checks for explicit role attributes that match landmark roles (banner, navigation, main, complementary, contentinfo, search, form, region). It also recognizes HTML5 elements that are implicit landmarks: header (banner), nav (navigation), main (main), aside (complementary), footer (contentinfo), section (region), and form (form). For each landmark, the tool extracts the role and attempts to find a label from aria-label, aria-labelledby, or a heading inside the element. The tool then generates a unique CSS selector for each landmark and applies a colored outline using the appropriate color for that role. A list of landmarks is displayed with click-to-scroll functionality. This approach ensures accurate, fast, and fully private landmark detection 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 the landmark list. 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, and highlight toggle—are saved per domain for a seamless experience.

PLEASE NOTE

Landmark Region 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 identifies landmarks based on ARIA roles and HTML5 sectioning elements. Some pages may use non-standard landmarks or custom roles that are not recognized. The tool highlights landmarks with colored borders and labels; these are purely visual and do not modify the page content. All settings are stored locally in your browser using GM_setValue. No page content, landmark data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only scans and highlights landmarks at your request.