No empty headings

Last updated:

How to fix an empty heading?

Add descriptive text to the heading, or remove it if it serves no structural purpose:

BAD:

heading with no content

<h2></h2>
BAD:

heading with only whitespace

<h2>   </h2>
BAD:

heading with only a decorative image and no alt text

<h2><img src="divider.png" alt=""></h2>
CORRECT:

heading with descriptive text

<h2>Our services</h2>
CORRECT:

heading with an image that has alt text

<h2><img src="logo.png" alt="Company name"></h2>

If you need a visual separator or decoration, use a <div> or <hr> instead of a heading element.

Why is this important?

Screen reader users often navigate a page by jumping between headings. An empty heading appears in the heading list but gives no information about the section that follows. This disrupts navigation and makes the page harder to understand.

More info:

WCAG 2.4.6 Headings and Labels.

Rule info

Standard

Best practice

User impact

Fix complexity

Affects

Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.