Accessibility Tree Viewer

WHAT IT DOES

Accessibility Tree Viewer helps you understand the accessibility structure of any webpage by generating and displaying the full accessibility tree. The script extracts the accessible object model from the browser, showing roles, accessible names, states, ARIA properties, and hierarchical relationships. Nodes are color-coded by role type—landmarks in blue, headings in purple, buttons in green, links in blue, forms in yellow, lists in orange, tables in pink, and images in teal. Elements with missing or incorrect ARIA attributes are highlighted with issue indicators. The tree displays aria-label, aria-labelledby, aria-describedby, and other ARIA properties. You can filter nodes by role type or search by name, role, or element tag. Clicking a tree node highlights the corresponding DOM element on the page. Accessibility issues and warnings are shown inline, making it easy to identify problems.

WHERE IT RUNS

This script runs on every website (matching all URLs), generating accessibility trees across the entire web. It works on any page—simple content sites or complex web applications—and adapts automatically.

HOW TO USE

After installing through the BotGentz extension, the Accessibility Tree Viewer appears on any page. Use the configuration panel to customize your experience: toggle the accessibility tree display on or off, enable or disable highlight-on-hover, show or hide ARIA details, set role filters, enable or disable auto-expand, and show or hide issues/warnings. The panel displays real-time statistics including total nodes and issue count. Use the search box to filter nodes by name, role, or tag. Use the role filter dropdown to show only specific role types (landmarks, headings, buttons, links, forms, lists). Click the "Generate Accessibility Tree" button to rescan the page, or "Copy Tree as Text" to export the tree as a text outline.

DOM-BASED ACCESSIBILITY TREE GENERATION WITH ARIA ANALYSIS

This script implements an accessibility tree generator using DOM traversal with ARIA analysis. The engine recursively walks the DOM tree, extracting accessible roles (from ARIA attributes or element semantics), accessible names (using aria-label, aria-labelledby, title, alt, or text content), states (aria-hidden, aria-disabled, aria-expanded, aria-selected, checked), and ARIA properties (all aria-* attributes). The role color mapping categorizes nodes into landmark, heading, button, link, form, list, table, img, or default groups. Issue detection includes missing accessible names, missing alt text on images, unrecognized ARIA roles, conflicting ARIA attributes, and common accessibility pitfalls. The tree rendering uses collapsible nested divs with toggle controls and inline issue/warning indicators.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including tree visibility, highlight-on-hover, ARIA details, role filters, auto-expand, and issue display—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and reads the DOM to generate the accessibility tree. It does not capture, store, or transmit any personal information. All analysis occurs locally in your browser. The accessibility tree is generated from DOM elements and may not exactly match the browser's internal accessibility tree. Issue detection is based on common accessibility guidelines and should be considered a starting point for investigation, not a definitive audit. This tool is provided for development and educational purposes only.