Headings must not be empty

Rule empty-heading · Structure & semantics · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An empty heading still appears in the heading list a screen reader presents, but announces nothing — a confusing dead entry in the page outline.

How to fix#

Put text in the heading, or remove the heading element if it is only there for spacing. An aria-label on the heading (or aria-hidden="true" when it is decorative) also resolves it without moving markup.

Example#

<h2></h2>

<h2>Pricing</h2><div aria-hidden="true"><h3>Slide 2</h3></div>

aria-hidden headings (e.g. carousel clones) are not in the accessibility tree and are not checked.

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

2.4.6 Headings and Labels — Level AA#

Headings and labels must describe the topic or purpose of the content they introduce.

Understanding 2.4.6

Standards#

This rule contributes to the following standards:

WCAG A WCAG AA EN 301 549 Best practice

References#

• W3C — Headings