• Success Criterion 1.3.1
  • Conformance level A

Empty Heading Tags Cluttering the Page’s Structure

1.3.1 — Info and Relationships

Scenario

Setting

A university's online course catalog

What’s wrong

Empty heading elements (h1–h6 with no content) creating phantom entries in the heading structure.

Example 

<h2>Computer Science</h2>
<p>Course listings below.</p>
<h3></h3>
<h2>Mathematics</h2>

Why it matters

A screen reader user browsing by heading hears a blank heading announced between sections, breaking navigation with nothing to show for it.

How to test

Use a screen reader's headings list: empty h1-h6 tags with no text create blank entries that waste navigation time — check for and flag any.

How to fix

Never use an empty heading for spacing; control vertical space with CSS margin instead.

<h2>Computer Science</h2>
<p>Course listings below.</p>
<h2>Mathematics</h2>

Outcome

A student's heading list shows only real department names, with no blank entries to sort through.

Who is affected

Screen reader users skimming the catalog by heading list encounter phantom, empty entries mixed with real ones.

Learn more

Related scenarios