Heading Inspector

Shows accessibility tree with heading structure (h1–h6) as screen readers see it. Finds sequence errors.

See heading structure the way screen readers do. Heading Inspector renders the H1–H6 outline of any web page using Chrome's real accessibility tree — the same data assistive technology consumes — and highlights sequence errors (e.g. an H4 directly after an H2). It's a focused tool for accessibility developers, content auditors, and anyone who needs the heading structure to actually be right. Why the Accessibility Tree, Not the DOM Most heading-audit tools walk the DOM. That misses or misreports several common accessibility patterns: - <div role="heading" aria-level="2"> — DOM-only tools see a div; the AX tree (and screen readers) see an H2. - <h3 aria-level="2"> — DOM-only sees an H3; screen readers announce H2. - aria-hidden="true" subtrees — sometimes walked anyway by DOM tools; correctly omitted from the AX tree. - Shadow DOM and computed accessible names — the AX tree handles these uniformly. Heading Inspector calls Accessibility.getFullAXTree via the Chrome DevTools Protocol so the outline you see is the outline a screen reader would announce. Features - Toggle the panel with one click on the toolbar icon - Headings indented by depth, with level labels (H1–H6) - Green squares mark correct heading order - Red octagons mark sequence errors (distinguished by both colour and shape — robust under colour-blindness) - Click any heading to scroll the page to it with a highlight flash - Visually-hidden labels and semantic HTML so the panel itself is screen-reader friendly Privacy Heading Inspector runs entirely on-device. No network calls, no analytics, no telemetry. The chrome.storage permission is used only to remember the on/off toggle state. Full policy: https://github.com/quatico-solutions/heading-inspector/blob/main/PRIVACY.md Open Source MIT-licensed. Source code, issues, and contribution guidance: https://github.com/quatico-solutions/heading-inspector About the Debugger Permission Heading Inspector uses the debugger permission solely to call Accessibility.getFullAXTree on the active tab. The debugger is attached and detached on each activation. Chrome will show a "Debugger attached" banner while the extension is active — that's a Chrome-enforced UI cue, not a sign of remote control.