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.
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>
Leave a Reply