Heading Outline Tree
Indented document heading tree with landmark chips, level tags, and issue badges for skipped levels, empty headings, and a duplicate H1.
Indented document heading tree with landmark chips, level tags, and issue badges for skipped levels, empty headings, and a duplicate H1.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Heading Outline Tree is the document structure inspector for the Acme projects dashboard. A landmarks strip lists the five detected regions as chips pairing the ARIA role with a plain label, then a ruled tree shows every heading on the page: a level tag, the heading text indented by depth, and a pass or issue badge. Three rows carry fix hints: an H4 that skips a level, an icon only heading with no text, and a second H1 rendered by the sidebar wordmark.
Headings are one typed array with a level union, and indentation comes from a Record keyed by that union, so depth can never drift from the data. The flagged level tag flips to the destructive fill, which makes broken rows scannable before you read a single hint.
Reach for this block on the accessibility or audit page of a settings area, wired to a DOM crawl of the page under review. Screen reader users navigate by headings first, so fix flagged rows before anything visual.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the per page heading structure audit. Other outline shapes:
Tip: crawl the rendered DOM, not the source; portals and conditional sections often inject the headings that break the outline.