How to fix empty heading on Webflow

Steps for Webflow

1. In the Webflow Designer, open the page and use the Navigator panel (left sidebar, stacked-boxes icon) to view all elements in the page tree.
2. Look for Heading elements (H1–H6) with no text label in the Navigator. Click each to select it on the canvas.
3. In the element settings on the right, either type content directly into the heading on the canvas or delete the element if it has no structural purpose.
4. If an empty heading is used purely for CSS styling/spacing, replace it by changing its tag to a `<div>` in the Element Settings panel (right sidebar → Tag dropdown) and apply the same styles.
5. For headings that contain only an icon (SVG), select the Heading element, add a Text node inside it, type a descriptive label, and then visually hide it using a custom 'sr-only' class (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)).
6. Publish and verify with axe DevTools.

<h2>Featured Collections</h2>

<!-- If text must be visually hidden but available to screen readers: -->
<h2>
  <span class="sr-only">Featured Collections</span>
  <!-- icon or decorative image here -->
</h2>

<!-- CSS for the sr-only class -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

What is empty heading?

A heading tag (like `<h1>`, `<h2>`, `<h3>`, etc.) exists in your page's code but contains no readable text inside it. This can happen when a developer uses a heading tag purely for visual spacing, when a theme or page-builder leaves a placeholder heading behind, or when an icon or decorative image is placed inside a heading without any accompanying text. Screen readers announce headings to blind and low-vision shoppers as navigation landmarks — when a heading is empty, the screen reader either announces nothing or says something confusing like "heading, level 2" with no label, which breaks the shopper's ability to understand or navigate your page.

Empty headings directly violate WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels), which are legal compliance benchmarks in many countries under laws such as the ADA (US), AODA (Canada), and EAA (EU). Beyond legal risk, screen-reader users rely on headings to jump quickly between sections — an empty heading wastes a navigation stop and destroys the logical outline of your page. Google also uses heading structure to understand page content hierarchy; empty or meaningless headings weaken your on-page SEO signals and can suppress keyword relevance. Finally, conversion suffers: assistive-technology users who encounter broken navigation are more likely to abandon your store.

See the complete Empty heading guide for every platform and the full background.