Headings should not be empty
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Screen reader users rely on headings to understand and navigate page structure. Empty headings create false landmarks in the accessibility tree, causing confusion and interrupting navigation flow.
How to fix this issue
Ensure all heading elements (`<h1>`–`<h6>`) contain descriptive, visible text that conveys the purpose of the section. Remove empty headings or replace them with appropriate semantic elements if they are used for layout only.
Developer guidance
Audit all headings using browser accessibility tools or automated scans (axe, jest-axe). Avoid dynamically inserting empty heading tags via CMS templates or components. Enforce heading content checks in your design system.
Code examples
Incorrect Implementation
<h2></h2>
<h3> </h3>Correct Implementation
<h2>Product Details</h2>
<h3>Technical Specifications</h3>
Trusted by organizations across Europe working toward WCAG and EAA conformance