Blog Post

Empty headings

The Zombie: Empty headings i.e. headings (<h1> through <h6>) with no content or no useful content.

<h1></h1> or <h2></h2> etc.
<h1> </h1> or <h2><!-- a comment --></h2>

Always a Zombie? Yes

Severity: serious for screen readers; less serious for others

Why it’s a Zombie: Just like sighted users screen reader users often scan through headings. If a heading is empty the screen reader will say there’s a heading but have nothing to say after that. The user then won’t know whether the heading is supposed to have something or not or why it’s blank.

Cure the Zombie by: preventing yours site from having empty headings. This can actually be difficult in some WYSIWYG editors, because it only appears as blank space and there’s no clear indication that a heading is there, particularly if it happens to come at the end of the content. You can add this CSS code temporarily to a page to highlight all headings elements with a bright green outline:

h1, h2, h3, h4, h5, h6 {
    outline: 5px solid chartreuse;
}