Headings (h1, h2, h3)

Description Inner text describes the heading
Role Should describe itself as a heading and its level
Relationships Headings should logically nest with a singular h1 and each major section staring with an h2 with h3 nested beneath.
State n/a
Focus Headings generally should not be focusable
Action n/a

Custom Element

Sometimes it's necessary to remediate divs or spans to act like headings with aria attributes, but this should only be a last resort. Only use this when using a semantic heading would break the layout of the page significantly.


  • Inner text describes the heading

Role Requires extra work

  • role="heading"
  • aria-level="2"


  • Logically nest headings with a singular page level h1
  • Each major section should start with an h2 with h3 headings nested beneath.
  • It should be exceedingly rare to need headings beyond h4.


  • n/a


  • Headings should not be focusable (unless it's a link).


  • n/a