Ensure that the page, or at least one of its frames contains a level-one heading

The page-has-heading-one rule ensures that a page or at least one of its frames contains a level-one heading (<h1>) or an element with role="heading" and aria-level="1".

What is being tested?

This rule checks that:

• The main document or at least one embedded frame contains a level-one heading.
• The level-one heading appears before the start of the main content.

Why it matters

Screen reader users rely on keyboard shortcuts to navigate by heading levels. A properly placed <h1> at the start of the main content lets users jump directly to the main section, saving time and improving orientation.

Without an h1, blind or low-vision users must listen linearly to the entire page to understand its structure, unlike sighted users who can visually scan a page.

Good markup example

<h1>Welcome to Our Website</h1>
<main>
  <h2>About Us</h2>
  <p>Our company was founded in...</p>
</main>

Best practice for iframes

When embedding content with <iframe>, try to fit its heading hierarchy within the parent page. For example, if the parent page uses an h1, the iframe should ideally start with an h2 if its content is a direct subsection.

Best practices

• Include one and only one h1 per page.
• Place the h1 at the start of the main content area.
• Use h2, h3, etc., to organize subsections hierarchically.
• For iframes, align the heading level with the parent page when possible.