Headings should not be empty

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.

Every heading must have visible, descriptive text — never leave it empty.

Why this matters and how to fix it

Why this matters

Screen reader users navigate pages by jumping between headings. An empty heading creates a meaningless stop in the navigation order, forcing users to guess what section follows. This disrupts understanding of the page hierarchy and causes confusion, especially in long forms or dashboard layouts.

How to fix this issue

Ensure all headings (`<h1>`–`<h6>`) contain descriptive visible text. If a heading is being used purely for layout or spacing, remove it and use CSS instead. If a heading is meant to be dynamically populated, ensure the content is injected before it appears in the DOM.

Automated detection · Manual review recommended

Developer guidance

Empty headings often come from CMS templates, component slots, or conditional rendering where the text prop is missing. Add checks in your component system to prevent rendering a heading element without text. Automated accessibility scans will flag this reliably — fix at the component layer to prevent repetition.

Code examples

Incorrect Implementation

<h2></h2>
<h3> </h3>

Correct Implementation

<h2>Product Details</h2>
<h3>Technical Specifications</h3>

Real-World Examples

Before

<section>
  <h2></h2>
  <p>This section lists your billing history.</p>
</section>
<!-- Screen reader announces: 'Heading level 2' with no context -->

After

<section>
  <h2>Billing History</h2>
  <p>This section lists your billing history.</p>
</section>
<!-- Screen reader announces: 'Billing History, heading level 2' -->

CSS Example (Guidance)

/* If spacing was the reason for the empty heading, replace with margin */
.section-title-placeholder { margin-top: 2rem; }

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, or TalkBack).
  2. 2. Use heading navigation shortcuts: • NVDA: H • VoiceOver: VO + U → Headings • TalkBack: Swipe up or down until you reach 'Headings' granularity.
  3. 3. Move through the page headings sequentially.
  4. • Expected: Each heading is announced with a meaningful name and correct level.
  5. • Failure: Screen reader announces 'heading' or 'heading level X' with no text.
  6. 4. Inspect in browser DevTools → Accessibility tree to confirm no empty heading nodes.
  7. 5. If content is dynamic, repeat the test while toggling UI states (e.g., open panels, route changes) to ensure headings don't appear empty due to delayed rendering.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance