How to fix an empty heading?

empty-heading page

The issue

Screen reader users move through a page by its headings, and an empty heading shows up in that list as a blank stop. It announces a heading level and then nothing, which says a new section starts without saying what it is. On a page with several, the outline that should summarize the page fills with gaps.

The cause is usually a template: a heading element kept for spacing or styling, a heading whose text is filled in by a field that was left empty, or a heading that holds only an icon with no text alternative.

Scope

Each visible <h1> to <h6> on the page is checked on its own. A heading counts as empty when it has no accessible name: no text, no aria-label, no aria-labelledby, no title and no image with alt text inside it. Headings hidden with hidden, aria-hidden="true" or an inline display: none are skipped.

This is a best-practice rule, not a WCAG criterion on its own, though empty headings work against WCAG 1.3.1 and 2.4.6.

How to check you have it

In probeo: the page reports the empty-heading rule, “Headings should not be empty”, on each empty heading, with minor impact.
By hand: view the page source and look for heading tags with nothing between them, or only whitespace, an icon or a non-breaking space.
With a tool: the headings list in a screen reader, or the accessibility pane in Chrome or Firefox DevTools, shows each heading’s computed name. An empty heading has none.

The fix

Give each heading text that names its section, or remove the heading element.

If the element is there for spacing or a visual divider, replace it with a <div> or a margin in CSS. If it is filled by a content field, make the field required, or skip the heading when the field is empty. If it holds only an icon, add text, visible or visually hidden, or give the image alt text.

<!-- Before -->
<h2><span class="icon-star"></span></h2>

<!-- After -->
<h2><span class="icon-star" aria-hidden="true"></span> Customer reviews</h2>

Done when: every heading on the page has text that names its section, and the check above comes back clean.

Do not

Do not use a heading element for spacing or decoration.
Do not hide an empty heading with aria-hidden to quiet the check; remove it or give it text.
Do not fill an empty heading with placeholder text such as “Section”.

FAQ

Does a heading that contains only an image count as empty?

Not if the image has alt text. The image’s alt text becomes the heading’s name. An image with alt="" or no alt leaves the heading empty.

No. Text hidden with a visually-hidden CSS class is still read by screen readers, so the heading has a name. Only hidden, aria-hidden="true" and display: none remove a heading from the check.

Why is this minor impact?

An empty heading doesn’t block anything on its own. It adds noise to the page outline, and on a page with many of them, that noise makes the outline hard to use.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.