A heading for a section of the page.

Often, heading elements will be referenced with the aria-labelledby attribute of the section for which they serve as a heading. If headings are organized into a logical outline, the aria-level attribute can be used to indicate the nesting level.

Need may arise such that you want to code some content in the page as a paragraph tag, div or a span but you want screen reader to pick it as a heading. In such scenarios provide role="heading" to the HTML element. The next part of the heading is its level. For providing the level to the heading use aria-level (property). The levels can be from one to six.

The following span will be read as heading level 2 by screen readers.

<span role="heading" aria-level="2">This is a span tag</span>