Using aria-labelledby to associate a heading with its content
Use something like this example to demonstrate how to associate heading content with a heading.
Example 1
This example demonstrates how to implement a level 7 heading using role="heading" and apply it to a piece of content. Since HTML only supports headings through level 6, there is no native element to provide these semantics.
Note: The aria-labelledby attribute is used to associate the heading content with its parent element.
<div id="hd7"> <div role="heading" aria-level="7" aria-labelledby="hd7">Apples</div> <p>Apples grow on trees in areas known as orchards...</p> </div>