How to fix: Empty heading elements

Headings build the navigable outline of a page, and screen reader users move through that outline heading by heading. WCAG Success Criterion 1.3.1 Info and Relationships requires that this structure be correct in code, and an empty heading is a structural promise with nothing behind it: a heading tag that announces a new section but provides no name for it.

Empty headings usually appear by accident. A common cause is using a heading tag purely for its big, bold styling and then filling it with an icon, a background image, or nothing at all. Another is a template or CMS that emits a heading wrapper before the dynamic title has loaded, leaving a hollow <h2></h2> in the markup. The result is a heading that contributes a blank entry to the outline.

The fix is one of two things. If the heading marks a genuine section, give it meaningful text that names that section. If it exists only for visual styling, or it is an empty leftover, remove the heading tag and apply the styling with CSS to a non-heading element instead. Note that a heading is not considered empty if it contains an image with alt text, because that alt text supplies the heading's accessible name.

Screen reader users are the core group. When they jump heading to heading or open a headings list to scan the page, an empty heading is announced as a heading with no text, which is confusing: it signals a section that should have a title but does not, leaving the user unsure whether content failed to load or they missed something. A list peppered with blank headings makes the whole outline unreliable.

It also affects people with cognitive disabilities, who depend on clear, descriptive section titles to follow a page, and it muddies SEO and document-to-PDF exports, both of which read the heading outline. Removing or filling empty headings keeps that outline trustworthy for everyone.

Empty headings fail SC 1.3.1, a Level A criterion, the most basic conformance tier, and broken heading structure is one of the most frequent categories automated WCAG tools surface. Because the heading outline is a primary navigation mechanism for assistive technology, a blank heading degrades how the whole page is exposed, not just one element. WCAG 2.1 Level AA is the standard U.S. courts apply to ADA website claims, and it folds in every Level A criterion.

Accessibility lawsuits keep rising and disproportionately hit smaller businesses, and the WebAIM Million report consistently finds heading problems among the most common failures on home pages. Empty headings are cheap to fix (add a few words or delete a tag) and easy for an auditor or automated tool to spot, so leaving them in place is hard to justify.

1. Find every heading (h1 through h6) and check whether its trimmed text content is empty.
2. If the heading marks a real section, add concise text that names that section.
3. If the heading exists only for its visual style or is an accidental empty tag, remove it and reproduce the styling with CSS on a non-heading element.
4. If the heading intentionally wraps a meaningful image, make sure that image has descriptive alt text, which supplies the heading name.
5. Re-scan to confirm no heading is left without text content.

<h2></h2>
<h3><span class="icon-star"></span></h3>
<p>Our most popular plan for growing teams.</p>

<h2>Pro Plan</h2>
<p>Our most popular plan for growing teams.</p>

AccessKnight selects every h1 through h6 element and checks two things for each: whether its trimmed text content is empty, and whether it contains an <img> that has an alt attribute. A heading is flagged only when its text is empty AND it has no image with an alt attribute, since such an image would supply an accessible name. The recommended fix is to add text content or remove the empty heading. Headings that contain visible text, or that wrap an image carrying alt text, pass the check.