Main content

heading

Characteristics

Superclass Role:

  • sectionhead

Related Concepts:

  • HTML h1
  • HTML h2
  • HTML h3
  • HTML h4
  • HTML h5
  • HTML h6
  • DTD level hd

Supported States and Properties:

  • aria-level

Inherited States and Properties:

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-expanded (state)
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant

Name From:

  • contents
  • author

Accessible Name Required:

  • True

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 can be used to indicate the nesting level.

Need may arise such that you want to code some content in the page as a paragraph tag, div or a span but you want screen reader to pick it as a heading. In such scenarios provide role="heading" to the HTML element. The next part of the heading is its level. For providing the level to the heading use aria-level (property). The levels can be from one to six.

The following span will be read as heading level 2 by screen readers.

<span role="heading" aria-level="2">This is a span tag</span>

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_TEXT

UI Automation ControlType Property: 

  • Text

UI Automation AriaRole Property: 

  • heading
More in this category: « img group »