Skip to content

Find what you need, instantly

Search components, ARIA roles & attributes, and WCAG criteria.

All roles

heading

Document structure role

Identifies a heading that introduces a section of content, with its rank set by aria-level, a positive integer starting at 1. Native `<h1>` to `<h6>` only reach level 6, but aria-level can go higher when a deeper structure genuinely needs it. Headings form the document outline screen-reader users rely on to skim and navigate, so prefer native `<h1>` to `<h6>` elements, which set the level implicitly.

Used on
A section heading. Prefer native <h1> to <h6>.
Required properties
  • aria-level, the heading rank, a positive integer (1 or higher)
Accessible name
From the heading's child text content.
Used by components
Example
role="heading"
<div role="heading" aria-level="2">Section title</div>
See a live, tested example on the Accordion page