• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

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.

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y