Empty Heading Elements
An empty heading element (<h1>, <h2>, etc.) contains no text content. Screen readers announce headings to help users navigate the page structure, but an empty heading is announced as a heading with no content, which is confusing. Empty headings also break the document outline that assistive technologies use.
Why It Matters
Screen reader users rely on headings to navigate pages quickly. An empty heading creates a dead-end in navigation and suggests broken or incomplete content. It's a WCAG 2.1 Level A violation and indicates sloppy HTML structure.
Code Examples
<!-- Empty heading --> <h2></h2> <!-- Heading with only whitespace --> <h3> </h3> <!-- Heading with only an image, no alt text --> <h2><img src="icon.svg"></h2>
<!-- Heading with text --> <h2>Our Services</h2> <!-- Heading with image and alt text --> <h2><img src="icon.svg" alt="Services"> Our Services</h2> <!-- If you don't need a heading, don't use one --> <p class="text-xl font-bold">Styled text, not a heading</p>
How to Fix
- 1Add meaningful text content to every heading element.
- 2If a heading contains only an image, add alt text to the image.
- 3If you used a heading for styling purposes only, use a styled paragraph or span instead.
- 4Remove empty heading elements entirely if they serve no purpose.
Check Your Accessibility Now
Our accessibility checker detects this issue automatically.
Open Accessibility CheckerHostinger — Fast & Affordable Web Hosting
Deploy accessible, validated code on reliable hosting.
Related Accessibility Errors
Missing Alt Text on Images
Learn why alt text is required on images, how it affects accessibility and SEO, and how to write effective alt attributes.
Skipped Heading Levels
Jumping from H1 to H3 breaks the document hierarchy. Learn how to structure headings correctly for screen readers and SEO.
Missing Language Attribute
The lang attribute on the html element is required for screen readers and SEO. Learn how to set it correctly.