Checks
H1 appears first
Confirms the first heading encountered in the page's document order is the h1, so the outline starts at the top of the hierarchy rather than partway down.
What this check looks for
This check looks at all headings in document order and inspects the first one. If the page has no headings, it reports "na". If the very first heading is anything other than an h1 — commonly an h2 or h3 appearing in a sidebar or promo block before the main content — it warns, naming the tag that appeared instead. If the first heading is the h1, it passes.
Why it matters
A well-formed document outline starts at the top level and nests downward, the same way a book starts with a title before its chapter headings. When a lower-level heading appears before the h1 in the DOM — often from a widget, banner, or navigation component rendered ahead of the main content — assistive technology users jumping by heading hear a subsection before they hear what the page is even about, which is disorienting. AI systems that read the outline top-to-bottom to establish context before parsing details get the same false start, potentially anchoring their understanding of the page around the wrong section first.
How to fix it
Reorder the markup, or move the pre-content widget's heading to a lower semantic weight, so the h1 renders first in source order:
<!-- h2 promo banner renders before the h1 -->
<h2>Free shipping this week</h2>
<h1>Wireless Noise-Cancelling Headphones</h1>
<!-- Fixed: h1 comes first in document order -->
<h1>Wireless Noise-Cancelling Headphones</h1>
<p class="promo-banner">Free shipping this week</p>If the banner needs a heading for its own accessibility, use a lower level (h3 or below) and place it after the h1 in source order, even if CSS visually positions it above.
See how your site scores on this check