What This Rule Checks
A level-one heading (<h1>) is typically used to introduce the main topic or purpose of a webpage. It helps screen readers and users easily identify the primary content of the page. Ensuring a page contains a <h1> element, and that it is used appropriately, improves accessibility and the page’s structure.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Deafblind users, who rely on braille displays and cannot access visual or auditory content.
Why This Matters
The h1 heading establishes the page’s primary topic. Screen reader users often navigate directly to the h1 to understand what a page is about. Without it, users must scan through content to determine the page purpose.
How to Fix
Use a Single h1 for Main Content: ensure that the page, or any of its frames, contains at least one <h1> element at the beginning of the main content. It is a best practice to have only one <h1> element on a page, with sub-sections labeled using <h2>, <h3>, and so on in descending order.
Maintain Heading Hierarchy: ensure that heading levels are used in a logical order. For example, after a <h1> heading, use <h2> for subsections and <h3> for subsections within those, creating a clear content structure.
Iframe Considerations: If your page contains iframes, the heading structure within the iframe should fit into the hierarchy of the parent document whenever possible. For example, if the parent page starts with <h1>, the content in the iframe should start with <h2> or <h3> depending on the structure.
Code Examples
<!-- Page with no h1 -->
<body>
<h2>Welcome</h2>
<p>Content...</p>
</body>
Copy
<!-- Page with clear h1 -->
<body>
<h1>Welcome to AccessibilityChecker</h1>
<h2>Features</h2>
<p>Content...</p>
</body>
Copy
Common Mistakes to Avoid
- Starting the page with h2 or lower because the site name is in the header.
- Using logo images as the h1 without proper alt text.
- Having an h1 that doesn’t describe the page content.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.