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>