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
Related Concepts
- HTML h1, h2, h3, h4, h5, and h6
Required States and Properties
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.