Use proper heading hierarchy

WCAG 1.3.1
Info and Relationships

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.

Choose heading levels based on document structure, not visual size.

Why this matters and how to fix it

Why this matters

Headings form the structural outline of the page and guide screen reader navigation. If heading levels are skipped or used inconsistently, users lose understanding of how content sections relate, making the page harder to scan and navigate.

How to fix this issue

Use <h1> for the page or view title, <h2> for major sections, and <h3> for subsections. Do not skip heading levels for visual appearance — use CSS to style headings instead of choosing levels based on size.

Automated detection · Manual review recommended

Developer guidance

This issue commonly appears in dashboards, CMS-generated content, design systems, and marketing pages using headings only for visual style. Standardize heading usage across components and enforce heading-level linting in PR reviews.

Code examples

Incorrect Implementation

<h1>Account Settings</h1>
<h4>Billing</h4>

Correct Implementation

<h1>Account Settings</h1>
<h2>Billing</h2>

Real-World Examples

Before

<header>
  <h1>Dashboard</h1>
</header>
<section>
  <h4>Recent Activity</h4>
</section>
<!-- Visually fine, but screen reader navigation jumps from level 1 to level 4 with missing structure -->

After

<header>
  <h1>Dashboard</h1>
</header>
<section>
  <h2>Recent Activity</h2>
</section>
<!-- Screen reader navigation now follows logical hierarchy → predictable and clear -->

CSS Example (Guidance)

/* Style headings visually without changing their semantic level */
h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
  2. 2. Use heading navigation: • NVDA: Press 'H' to move through headings • VoiceOver: VO + U → Headings • TalkBack: Change swipe granularity to Headings
  3. 3. Ensure the hierarchy increases gradually (H1 → H2 → H3).
  4. 4. Confirm no heading level is skipped (e.g., H1 → H4).
  5. 5. Open DevTools → Accessibility Tree → verify heading structure matches visual intent.
  6. 6. If headings are inserted by a CMS or designer, check final rendered output — not just template markup.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance