WAI-ARIA: Role=Heading

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

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST convey its role and name	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
MUST convey its default level as 2 if aria-level is missing	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
MUST provide shortcuts to jump to headings	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported

Role=Heading 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

• sectionhead

Related Concepts

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

Required States and Properties

• aria-level

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription

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

• W3C (opens new window)
• A11Y Support