Back to Learn
Pulseaccessibility

All Headings Have Content

What This Audit Checks

This audit verifies that all heading elements (h1 through h6) contain visible text or accessible content. A heading that is empty or contains only whitespace provides no information to users.

Why It Matters

Screen reader users navigate pages by jumping between headings. An empty heading appears in the heading list but announces nothing, creating a confusing dead end that breaks the navigational flow.

How to Fix It

  • Remove empty heading elements. If the heading has no content, it should not exist in the DOM.
  • Check for headings used as spacers. If you added an empty <h2> for vertical spacing, replace it with CSS margin or padding.
  • Add visually hidden text if the heading serves a structural purpose but has no visible label. Use an sr-only class to keep it accessible.
<!-- Bad: empty heading -->
<h2></h2>
<p>Some content below.</p>

<!-- Bad: heading with only whitespace -->
<h2>   </h2>

<!-- Good: heading has content -->
<h2>Account Settings</h2>
<p>Manage your preferences below.</p>

<!-- Good: visually hidden heading for structure -->
<h2 class="sr-only">Navigation</h2>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources