Skip to content

Technique ARIA12:Using role=heading to identify headings

About this Technique

This technique relates to 1.3.1: Info and Relationships (Sufficient).

This technique applies to technologies that support Accessible Rich Internet Applications (WAI-ARIA).


The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading. The role="heading" property must be paired with the aria-level property to define the heading level.

When possible, use native heading markup. For example, it is preferable to use an h1 element, rather than using <div role="heading" aria-level="1">. Native HTML elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <div role="heading" aria-level="1"> will not be styled as a heading, because the underlying element is a div. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.


Example 1: Simple headings

This example demonstrates how to implement headings using role="heading" and aria-level.

<div role="heading" aria-level="2">Global News Items</div>
... a list of global news with editorial comment....
<div role="heading" aria-level="3">Politics</div>
... a list of global political news stories ...

Example 2: Additional heading levels

This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings up to level 6, there is no native element to provide these semantics.

<h5>Fruit Trees</h5>
<p>Apples grow on trees in areas known as orchards...</p>
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

Related Resources

No endorsement implied.



  1. Examine each element with the attribute role="heading".
  2. Determine whether the content of the element is appropriate as a heading.
  3. Determine whether the aria-level value is the appropriate hierarchical level.

Expected Results

  • #2 and #3 are true.
Back to Top