Skip to content
StoreA11y

Shopify · 1.1.1 Non-text Content (Level A)

Elements with role="img" have no accessible name on Shopify

Some elements are declared as images with role="img" but have no name. Inline SVG icons and CSS-drawn star ratings are the usual cause — the shopper hears "image" and nothing else, so a 4-of-5 star rating conveys nothing.

Which WCAG criterion this fails

  • Does not meet 1.1.1 Non-text Content (Level A)

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. Add aria-label to the element, or a <title> as the first child of an inline <svg> referenced by aria-labelledby.
  2. Star ratings should announce the value: aria-label="Rated 4.5 out of 5 stars, 128 reviews".
  3. If the graphic is purely decorative, remove role="img" and add aria-hidden="true" instead — do not give it an empty label.
  4. Payment-method icons in the footer need names too: aria-label="Visa", aria-label="Mastercard".

Where this usually lives

snippets/icon-*.liquid, sections/footer.liquid (payment icons), review app blocks, snippets/rating.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

<!-- Meaningful graphic -->
<span role="img" aria-label="Rated 4.5 out of 5 stars">★★★★☆</span>

<!-- Inline SVG with a title -->
<svg role="img" aria-labelledby="visa-title"><title id="visa-title">Visa</title>…</svg>

<!-- Decorative -->
<svg aria-hidden="true" focusable="false">…</svg>

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: role-img-alt (axe-core).