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>.
Why this matters and how to fix it
Why this matters
The <h1> is the page's main subject. Screen reader users rely on it to understand where they are and what the page is about. If the page lacks a clear <h1>, or contains multiple unrelated <h1> elements, screen reader navigation becomes confusing and disorienting. Sighted users get a visual title; non-visual users need the same semantic clarity.
How to fix this issue
Ensure each page includes exactly one <h1> that describes its primary purpose. Use <h2>, <h3>, etc. for subsections beneath it. If using multiple sections with their own outlines, confirm you are using proper HTML5 sectioning and landmarks — otherwise stick to one <h1>.
Developer guidance
Template and layout systems often forget to include or enforce the page heading. Always require a page-level <h1> in CMS templates, React page layouts, Next.js route-level components, etc. Do not rely solely on large text styles — use real semantic headings.
Code examples
Incorrect Implementation
<div class="page-title">Welcome</div>Correct Implementation
<h1>Welcome</h1>Real-World Examples
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. Open the page and inspect the DOM.
- • Expected: Exactly one <h1> element.
- 2. Turn on a screen reader and press the 'H' key to navigate headings.
- • Expected: The first heading announced should be the page's main title.
- 3. Check that sub-sections use <h2>, <h3>, etc. in a logical hierarchy.
- 4. If the page has multiple <h1> elements, verify they belong to distinct <section> or <article> elements.
- • If not, demote additional headings to <h2>.
Trusted by organizations across Europe working toward WCAG and EAA conformance