# Page should contain a level-one heading
> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/page-has-heading-one
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Screen reader users rely heavily on heading navigation to move efficiently through web pages. Most screen readers provide keyboard shortcuts (such as pressing `H` to jump to the next heading, or `1` to jump to the next `h1`) that let users skip directly to the main content. When a page lacks a level-one heading, these shortcuts fail, and users are forced to listen through navigation menus, banners, and other content before reaching what they came for.
This is fundamentally a problem of perceivability and navigability. Sighted users can glance at a page and instantly understand its layout — they see the large, bold title and know where the main content begins. Blind, low-vision, and deafblind users don't have that option. For them, headings serve as a structural outline of the page. A well-organized heading hierarchy starting with an `h1` gives these users an equivalent way to quickly grasp the page's structure and jump to the content they need.
This rule is a Deque best practice and aligns with broader accessibility principles in WCAG, including **Success Criterion 1.3.1 (Info and Relationships)**, which requires that structural information conveyed visually is also available programmatically, and **Success Criterion 2.4.6 (Headings and Labels)**, which requires headings to be descriptive. While not a strict WCAG failure, the absence of an `h1` has a moderate impact on usability for assistive technology users.
## How to Fix It
1. **Add a single `h1` element** at the beginning of your page's main content. This heading should describe the primary topic or purpose of the page.
2. **Use only one `h1` per page.** While HTML5 technically allows multiple `h1` elements, best practice is to use a single `h1` that represents the top-level topic.
3. **Build a logical heading hierarchy.** After the `h1`, use `h2` for major sections, `h3` for subsections within those, and so on. Don't skip heading levels (e.g., jumping from `h1` to `h4`).
4. **Handle iframes carefully.** If your page includes an `iframe`, the heading hierarchy inside that iframe should fit within the parent page's heading structure. If the parent page already has an `h1`, the iframe content should start with `h2` or lower, depending on where it sits in the hierarchy. When the iframe contains third-party content you can't control, this may not always be possible, but it's still the ideal approach.
### What the Rule Checks
This rule verifies that the page (or at least one of its frames) contains at least one element matching either `h1:not([role])` or `[role="heading"][aria-level="1"]`.
## Examples
### Incorrect: Page with No Level-One Heading
This page jumps straight to `h2` headings without ever establishing an `h1`. Screen reader users have no top-level heading to navigate to.
```html
Welcome to Our Store
Browse our latest products below.
Featured Products
Check out what's new this week.
```
### Correct: Page with a Level-One Heading
The `h1` clearly identifies the page's main topic and appears at the start of the main content. Subsections use `h2`.
```html
Welcome to Our Store
Browse our latest products below.
Featured Products
Check out what's new this week.
```
### Correct: Using ARIA to Create a Level-One Heading
If you can't use a native `h1` element, you can use the `role="heading"` and `aria-level="1"` attributes on another element. Native HTML headings are always preferred, but this approach is valid.
```html
Welcome to Our Store
Browse our latest products below.
```
### Correct: Page with an Iframe That Fits the Heading Hierarchy
When embedding content in an iframe, the iframe's heading structure should continue from the parent page's hierarchy rather than introducing a second `h1`.
```html