Headings

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.

Description

  • Inner text describes the heading

Role Requires extra work

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

Relationships

  • 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.

State

  • n/a

Focus

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

Actions

  • n/a