The problem with trying determine heading depth automatically is the depth is not something that can be deduced just by the structure. If headings are siblings, for example, the may be on the same level semantically or not.

One way I've dealt with this in react is combine a Heading component with ContentGroup component. Each content group needs exactly one heading, and heading can't exist without it. Content group can contain other content groups. The tag for heading can then be determined by how many content groups are in the tree above it.

This works pretty well ime, but it can be hard to get devs to use (or think about accessibility at all).

▲

wongarsu 4 days ago | parent [-]

That's how html should have been designed from the start. HTML is originally designed as a very flat hierarchy, e.g. h1 p p p h2 p p h2 p p h3 p h2 p just following each other. When really it would make much more sense to have h{p p p h{p p} h{p p h{p}} h{p}}.

	▲	yiiii 4 days ago \| parent [-]
		That's what sectioning elements [1] like <section> and <article> where once introduced.Opposite to just using <div> elements their purpose was to create a real document outline, where it would have been possible to only use <h1> and their level would be determined by how deep the section is nested, but this approach was never really adapted. [1] https://www.w3schools.com/html/html5_semantic_elements.asp