Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Headings with no text on Shopify

Some heading elements contain no text. They still appear in the screen reader's heading list as blank entries, so the outline of the page is littered with empty rows. This normally comes from a theme section left with its heading field blank, or a heading used purely as a spacer.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)
  • Does not meet 2.4.6 Headings and Labels (Level AA)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Online Store > Themes > Customize. Find the section named in the finding and either fill in its heading or remove the block.
  2. If the theme renders the heading tag unconditionally, wrap it: {% if section.settings.heading != blank %} … {% endif %}.
  3. A heading that contains only an image must give that image alt text — the alt becomes the heading text.
  4. If a heading exists only for spacing, delete it and use CSS margin instead.

Where this usually lives

sections/rich-text.liquid, sections/multicolumn.liquid, sections/featured-collection.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

{% if section.settings.heading != blank %}
  <h2 class="title">{{ section.settings.heading | escape }}</h2>
{% endif %}

<!-- Heading whose content is an image -->
<h1><img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}"></h1>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: empty-heading (axe-core).