H1 is not the first heading
What it is
A heading of another level, an <h2> to <h6>, appears in the HTML before the page’s first <h1>. Usually it sits in the header, a navigation menu, an announcement bar or a cookie notice, or it is small “eyebrow” text above the main heading that was given a heading tag for its styling.
Why it matters
The cost is modest. Google says heading order does not matter for Search, and W3C’s headings tutorial accepts navigation headings placed before the main heading. It matters when the heading ahead of the H1 is not navigation: screen reader users jumping to the first heading land on an eyebrow label or a banner instead of the topic, and tools that split a page at its headings are likely to take that as where the content starts.
How Asky checks it
Asky takes the first <h1> to <h6> element in the page’s raw HTML, in source order, and reports the page when it is not an <h1>; the finding names its level. Headers, menus and headings hidden with CSS count, while headings added by JavaScript and elements with role="heading" are not seen. The check runs only when an H1 has text, or the first H1 has image alt text or an SVG title; otherwise the page is reported as H1 missing or empty instead. Despite the name, skipped levels later in the page, such as an H2 followed by an H4, are not checked here: the accessibility check for heading order reports those.
Reported as a warning with medium severity.
How to fix it
- Find the heading that comes before the H1 in the page source; the finding shows its level.
- If it is in a header, menu, banner or cookie notice and only uses a heading tag for its look, change it to a
<p>,<div>or<span>and keep the styling with a class. In Webflow, change the element’s tag; in WordPress, change the widget or block’s heading level or the theme template. - If it is eyebrow text above the H1, such as “Case study”, make it a
<p>styled with a class. Moving it below the H1 as an<h3>would be reported as a skipped heading level. - If the true main heading is the earlier one, make it the H1 and change the old H1 to an H2, so the page still has exactly one H1.
- To leave it as it is: if the earlier heading labels navigation that screen reader users rely on, such as a hidden “Main menu” heading, mark the issue resolved.
Example
On https://example.com/customers/example-org an eyebrow label uses an H3 above the H1:
<!-- Before: the first heading is an H3 -->
<h3 class="eyebrow">Case study</h3>
<h1>How Example Org doubled its demo requests</h1>
<!-- After -->
<p class="eyebrow">Case study</p>
<h1>How Example Org doubled its demo requests</h1>