WAI-ARIA: Role=Heading

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Heading
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

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

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

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

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Similar Posts

WAI-ARIA: Role=Separator

WAI-ARIA: Role=Separator

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A divider that separates and distinguishes sections of content or groups of menuitems. There are two types of separators: a static structure that provides only a visible boundary and a focusable, interactive widget that is also moveable. If a separator is not focusable, it is revealed to assistive technologies as a static structural element….

WAI-ARIA: Role=Table

WAI-ARIA: Role=Table

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A section containing data arranged in rows and columns Description New in ARIA 1.1 A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive. If the tabular container maintains a selection state, provides its own two-dimensional navigation, or allows the user to rearrange or…

Leave a Reply

Your email address will not be published. Required fields are marked *