A heading for a section of the page.

Description

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 is used to indicate the nesting level.

Screen Reader Support For Role=Heading

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its role and namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its default level as 2 if aria-level is missingsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST provide shortcuts to jump to headingssupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

Example

HTML Example 1

This example demonstrates how to implement simple headings using role=”heading”.

<div role=”heading”>System Settings</div>
... a list of system settings, with explanations ....

<div role=”heading”>User Settings</div>
... a list of user settings, with explanations ...

HTML Example 2

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

…
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<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>

HTML Example 3

<h1 role=”heading”>Introduction</h1>
<p>Lorem ipsum...</p>

Characteristics

Superclass Role

Related Concepts

  • HTML h1, h2, h3, h4, h5, and h6

Required States and Properties

Inherited States and Properties

Name From

  • contents
  • author

Accessible Name Required

  • True

Implicit Value for Role

  • Default for aria-level is 2.

Semantic HTML

Use semantic headings <h1>, <h2> etc.

<h1>Setting the Exposure Manually on a Camera</h1>
<p>Put text here...</p>
<h2>Set the ISO</h2>
<p>Put text here...</p>
<h2>Choose an aperture</h2>
<p>Put text here...</p>
<h2>Choose a shutter speed</h2>
<p>Put text here...</p>

Reference

Share A11Y Love

Leave a Reply

Your email address will not be published.