Heading Inspector

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.