Ensure each page has one top-level heading
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every page needs one sentence that tells you where you are — that’s the <h1>.
Overview
Why this matters
Clear, descriptive headings help users understand page structure and quickly find relevant sections. If headings are missing, vague, or inconsistent, both screen reader and keyboard users take longer to navigate and may miss key content.
How to fix this issue
Provide a clear page heading and meaningful section headings that reflect content purpose. Use semantic heading elements (`<h1>` to `<h6>`) in a logical hierarchy and avoid visual-only heading text built with non-heading tags.
Developer Guidance
For WCAG 2.4.6, the requirement is descriptive headings and labels, not a strict count of one `<h1>`. In most app pages, a single primary `<h1>` is a strong pattern, but the main rule is that heading structure must be meaningful and consistent across templates, routes, and dynamic states.
Code Examples
Incorrect Implementation
<div class="page-title">Welcome</div>Correct Implementation
<h1>Welcome</h1>Real-World Implementation
Before
<header><span class="title-lg">User Settings</span></header>
<!-- Screen reader: no main heading → no orientation cue -->After
<header><h1 class="title-lg">User Settings</h1></header>
<!-- Screen reader: 'Heading level 1: User Settings' → clear context -->CSS Example (Guidance)
/* Style the real <h1> instead of replacing it */
h1.title-lg {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
}Manual Testing
- 1. Inspect the page and confirm headings (`<h1>` to `<h6>`) describe the visible sections.
- 2. Navigate headings with a screen reader shortcut (NVDA/JAWS: H, VoiceOver heading navigation).
- 3. Verify heading sequence is logical and no level jumps create confusion.
- 4. Confirm the primary page purpose is exposed by a clear top heading.
- 5. Check dynamic states (loaded/error/empty) to ensure headings remain meaningful.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance