How to Fix Empty Headings WCAG 2.2

Why this matters

Screen reader users navigate pages by jumping between headings. An empty heading creates a navigation stop that leads nowhere, which is disorienting. Empty headings are often created when developers use heading elements for visual spacing instead of semantic structure.

Code examples

<h2></h2>

<h3>  </h3>

<!-- Heading with only an icon -->
<h2><i class="fas fa-star"></i></h2>

<!-- Remove the heading if it serves no purpose -->
<!-- Or add meaningful text -->
<h2>Featured products</h2>

<!-- If icon heading is needed, add text -->
<h2>
  <i class="fas fa-star" aria-hidden="true"></i>
  Featured
</h2>

<!-- For visually hidden headings -->
<h2 class="sr-only">Navigation</h2>

How to fix it — step by step

1. 1
   Remove any heading elements that have no text content
2. 2
   If you used a heading element for visual spacing, replace it with CSS margin/padding
3. 3
   Never use headings just for their default bold/large styling — use CSS instead
4. 4
   If you need a heading that is visually hidden (for screen readers only), add text with a sr-only CSS class
5. 5
   For headings that contain only icons, add visible or sr-only text describing the section
6. 6
   Audit headings with HeadingsMap browser extension to spot empty headings quickly

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.