Empty heading
Moderate effortFound on 21% of audited stores.
Find every empty heading tag on your store and add meaningful, visible text to it — or remove the tag entirely if it serves no structural purpose.
What it is
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.
Why it matters
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.
How to fix it
- Audit your pages using a browser accessibility tool (e.g. axe DevTools browser extension, WAVE, or your platform's built-in checker) to identify which pages and which heading levels contain empty headings.
- For each empty heading, open the page editor and locate the offending heading block or element.
- Decide: does this heading serve a real structural purpose? If yes, add a short, descriptive text label (e.g. 'Featured Products', 'Why Shop With Us'). If no, delete the heading element entirely — do not leave an empty tag.
- If the heading wraps only an icon or image, add a visually-hidden text label using CSS (e.g. a `<span class='sr-only'>` or `aria-label` attribute) so the text is available to screen readers without appearing on-screen.
- If a heading is used purely for visual spacing or styling, replace it with a `<div>` or `<p>` styled with CSS — do not misuse heading tags for layout purposes.
- Re-test with an accessibility checker after saving to confirm zero empty-heading violations remain.
<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>Fix it on your platform
Pick your platform for the exact steps.
How to fix empty heading on Shopify
- Go to Online Store → Themes → Customize to open the theme editor.
- Navigate to the page reported (e.g. homepage, collection, product). Look for any 'Heading' or 'Text' sections/blocks that appear empty — they will show as blank in the editor canvas.
- Click the empty heading block in the left-hand section list, type meaningful text into the 'Heading' field, then Save.
- For headings inside custom Liquid templates, go to Online Store → Themes → (...) Edit code, open the relevant template file (e.g. sections/featured-collection.liquid), search for `<h1>`, `<h2>`, `<h3>` tags that have no text node between them, and either add text content or replace the tag with a semantically appropriate element.
- If you use a page-builder app (Shogun, PageFly, GemPages), open the page in that app's editor, select the empty Heading element, add text or delete the block, then republish.
- Verify with the axe DevTools browser extension on your live storefront.
How to fix empty heading on Shopify Plus
- Follow all standard Shopify steps above.
- For checkout customisation, go to Settings → Checkout → Customise and check heading blocks inside checkout sections for empty content.
- In Launchpad or custom scripts, search for dynamically injected heading tags that may render empty based on logic conditions — add a fallback text string or conditional rendering guard.
How to fix empty heading on WooCommerce
- In your WordPress dashboard, go to Appearance → Theme File Editor (or use a child theme) and search your template files (e.g. single-product.php, archive.php) for `<h1>`, `<h2>`, `<h3>` tags with no inner text.
- For pages built with the Block Editor (Gutenberg), open the page/post, look for Heading blocks that are empty, and either type content into them or delete the block.
- For pages built with Elementor: open the page in Elementor, switch to the Navigator panel (View → Navigator), look for Heading widgets with no text in the Content → Title field, add text or delete the widget.
- For pages built with Divi: open the page in Divi Builder, find Heading modules with an empty 'Heading Text' field, fill them in or remove the module.
- Install the 'WP Accessibility' plugin (by Joe Dolson) which includes a heading-structure checker under Tools → Accessibility to help locate remaining issues.
- Re-test with the WAVE browser extension.
How to fix empty heading on BigCommerce
- Go to Storefront → My Themes → Advanced → Edit Theme Files to access your Stencil theme source.
- Search your Handlebars templates (e.g. templates/pages/product.html, templates/components/) for `<h1>`–`<h6>` tags that may output an empty string when a variable is undefined (e.g. `<h2>{{product.brand}}</h2>` where brand may be blank).
- Add a Handlebars conditional guard: `{{#if product.brand}}<h2>{{product.brand}}</h2>{{/if}}` so the heading is only rendered when it has content.
- For pages edited in the Page Builder (Storefront → Page Builder), locate Heading widgets with no text in the Content field, add text or delete the widget, then Publish.
- Use the axe DevTools browser extension on your live store to confirm the fix.
How to fix empty heading on Wix
- Open the Wix Editor for the page with the issue.
- Click directly on the heading element on the canvas that appears empty. If it is invisible, try clicking in the area where a heading might be hiding (they can be white text on white background).
- If the heading element exists but has no text, either type meaningful content into it or select it and press Delete to remove it.
- In Wix Editor X / Wix Studio, use the Layers panel (left sidebar) to expose all elements including hidden or zero-opacity headings. Select each, check its text content, and fix or remove.
- For Wix blog or store pages generated from data, ensure your dynamic data source for heading fields is never empty; add a fallback value in your Wix Content Manager dataset.
- Preview and use the WAVE browser extension on the published URL to verify.
How to fix empty heading on Wix Studio
- In Wix Studio, open the relevant page and open the Layers panel from the left toolbar to see every element, including hidden ones.
- Identify any Text elements set to Heading style (H1–H6) that contain no text. Click each and either add descriptive text or delete the element.
- For component/section templates reused across pages, edit the base component and fix the heading there so the fix propagates everywhere it is used.
- Use the built-in Accessibility Wizard (Site → Accessibility Wizard) to surface and step through remaining issues, then republish.
How to fix empty heading on Squarespace
- Open Pages and click Edit on the affected page.
- Click on each content block. For Text blocks, look for lines formatted as Heading 1–4 that have no visible text (may appear as an empty line with heading formatting).
- Click the empty heading line and either type meaningful text or select that line and delete it with Backspace/Delete.
- For sections with custom code blocks (</> Code blocks), click Edit on the code block and search for empty `<h1>`–`<h6>` tags to fix in the HTML directly.
- Save and Preview. Use the WAVE extension on the live URL to confirm no empty headings remain.
How to fix empty heading on Webflow
- 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.
- Look for Heading elements (H1–H6) with no text label in the Navigator. Click each to select it on the canvas.
- 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.
- 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.
- 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)).
- Publish and verify with axe DevTools.
How to fix empty heading on Adobe Commerce (Magento)
- SSH into your server (or use your deployment pipeline) and search theme template files under app/design/frontend/<Vendor>/<theme>/ for heading tags: `grep -rn '<h[1-6][^>]*></h[1-6]>' .`
- Open each identified .phtml or .html (Knockout/Hyva) template file in your editor.
- For hardcoded empty headings, add meaningful text or remove the tag. For dynamically-output headings, wrap them in a condition: `<?php if ($block->getTitle()): ?><h2><?= $block->escapeHtml($block->getTitle()) ?></h2><?php endif; ?>`
- In the Magento Admin, go to Content → Pages or Content → Blocks, open the relevant CMS page/block in the WYSIWYG editor, switch to HTML source view, find empty `<h>` tags, and fix or remove them.
- Clear the Magento cache: System → Cache Management → Flush Magento Cache, then re-test with axe DevTools.
How to fix empty heading on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template structure, CLI commands, and admin panel paths are identical for the open-source edition.
Does your site have this issue?
Run a free SEOLZ audit to find empty heading — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does empty heading matter?
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.
How do I fix empty heading?
Find every empty heading tag on your store and add meaningful, visible text to it — or remove the tag entirely if it serves no structural purpose.
Authoritative references
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI
- ARIA basics — MDN