I want an HTML attribute to reset and isolate the heading hierarchy within a container element

Submitted by Joppe Kroon

This idea is currently being discussed.

I want an HTML attribute that lets me declare that a container element starts a fresh, isolated heading tree, so that web components and reusable content blocks can safely use h1-level headings without disrupting the heading structure of the surrounding page.

HTML's original outline algorithm promised that sectioning elements (<article>, <section>, etc.) would create nested heading contexts, meaning the same <h1> inside two different sections would be ranked appropriately in the accessibility tree. In practice, that algorithm was never implemented by browsers and has since been removed from the specification. The practical result is that all headings on a page compete in a single flat hierarchy, regardless of what element they are nested inside.

This creates a real problem for reusable components and web components. When I author a standalone component -- a card, a widget, a document viewer -- I do not know at what heading level it will be placed in the consuming page. To avoid breaking the page's heading structure, I must either:

A declarative attribute such as heading-root or heading-scope on any container element would instruct the browser and accessibility tree to treat the contained headings as a self-contained subtree, resetting the rank to h1 within that boundary. This would allow:

This feature is increasingly urgent as the lines between documents and applications blur. PWAs and component-driven architectures now regularly compose pages from isolated pieces of UI, each of which deserves its own logical heading hierarchy.

Tagged
HTML Accessibility
Votes
0
What are votes for and how are they tallied?