demo · v140

A11y Audit

The core accessibility concern the spec calls out: an h1 inside article, section, aside, or nav is silently shrunk to look like an h2, but the accessibility tree still reports level 1. Sighted users see one structure; screen reader users hear a different one.

Render mode:

rendered output

Top of page (top-level h1)

Section heading (nested h1)

Looks identical to an h2 in the legacy UA stylesheet…

Article title (nested h1)

…but every h1 here is still aria-level=1.

accessibility tree

heading "Top of page" level=1

region (section)

heading "Section heading" level=1

article

heading "Article title" level=1

audit findings

    /* the deprecated UA stylesheet rule */
:matches(article, aside, nav, section) h1 {
  font-size: 1.5em;
  margin-block: 0.83em;
}

/* fix in your CSS (works in every browser):
   pick the right semantic level instead */
<section>
  <h2>Section heading</h2>
</section>

    see also