Powered by
Structure & headings
A Heading Has No Text in It
Screen reader users jump between headings to find their way, and an empty one says "heading" with nothing after it — a dead end that wastes time.
empty-headingBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- MinorMinor — Cosmetic, or best practice.CurrentScanners run this rule today.
- Owner
- DevContentTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Many screen reader users move through a page by jumping from heading to heading. It's like skimming the bold titles. An empty heading gives them a stop with nothing to hear.
Empty headings usually come from spacing hacks, deleted text, or icons with no text alternative. Each one adds noise and makes the page feel broken.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "heading level 2" and then silence, and wonder what they missed. | Partial impact |
| Low-vision users (magnification) | Affected only if they also use a screen reader; on screen, nothing looks wrong. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a best practice, not a WCAG requirement on its own. Still, auditors flag it, and it often points to real heading problems nearby. | Low impact |
| Conversion | Rarely stops a sale on its own. | Low impact |
| SEO | Search engines get nothing from an empty heading, but fixing it brings little real gain. | Low impact |
| Brand trust | Silent headings make a site feel careless to screen reader users. | Low impact |
| Cost to fix | Cheap to fix. Often it's one template or one CMS field left blank. | High impact |
Fixing it in code
A heading used only for spacing
Don't
<h2></h2>
<p>Free delivery on all orders.</p>A screen reader says: “Heading level 2”
Do
<p class="spaced">Free delivery on all orders.</p>A screen reader says: “Free delivery on all orders.”
Use CSS margin for space, and keep headings for real titles.
A heading that holds only an icon
Don't
<h2><img src="cart.svg" alt=""></h2>A screen reader says: “Heading level 2”
Do
<h2><img src="cart.svg" alt=""> Your cart</h2>A screen reader says: “Your cart, heading level 2”
The heading now has text a screen reader can read out.
Fixing it in design and content
A blank heading field in the CMS
Don't
The editor leaves the section title empty, but the template still prints a heading tag.
A screen reader says: “Heading level 2”
Do
The editor writes a short title, or the template skips the heading when the field is blank.
A screen reader says: “Delivery options, heading level 2”
No title means no heading, so there's no silent stop.
Designer's handoff note
Every heading in a design should have real words. Use spacing in the layout, not empty headings.
If a section title is just an icon, add visible text or a written label for it in the spec.
Quick test
Tool
NVDA (opens in a new tab) (free on Windows)
Checklist
- Pass
- Every heading reads out a short, clear title.
- Fail
- You hear "heading" with no words after it.
What a green scan still misses
A scanner finds headings with no text. It can't tell if the text is useful — a heading saying "Title" or "Section 1" passes but helps nobody.
Reference
- Rule ID
empty-heading- Raised by
- axe-core: “Headings should not be empty”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026