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

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

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=heading.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=heading.