How to fix svg img alt on Shopify

Steps for Shopify

1. Go to Online Store → Themes → (your active theme) → Actions → Edit code.
2. Locate the template or snippet file that contains the SVG — common locations are `snippets/icon-*.liquid`, `sections/header.liquid`, or `layout/theme.liquid`.
3. Find the `<svg>` tag and add `role='img'` and `aria-labelledby='UNIQUE-ID'` as attributes.
4. Insert `<title id='UNIQUE-ID'>Your descriptive label here</title>` as the very first line inside the `<svg>` element.
5. For decorative SVGs (e.g. arrow chevrons), add `aria-hidden='true'` and `focusable='false'` instead.
6. Save the file and verify with Shopify's Theme Preview; test with a screen reader or the axe browser extension.

<svg role="img" aria-labelledby="free-shipping-title">
  <title id="free-shipping-title">Free Shipping on Orders Over $50</title>
  <!-- SVG path data here -->
</svg>

<!-- Decorative SVG — hidden from screen readers -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative path data -->
</svg>

What is svg img alt?

SVG (Scalable Vector Graphics) files are commonly used on ecommerce sites for logos, icons, badges, and product illustrations because they look sharp at any size. When an SVG is used as a meaningful image — not just a decorative flourish — it must have a text alternative so that screen readers (used by blind and low-vision shoppers) can describe what it shows. The most reliable way to do this is to place a `<title>` element as the first child inside the `<svg>` tag, and link them with an `aria-labelledby` attribute. Without this, a screen reader either skips the image entirely or reads out raw, meaningless code.

Roughly 1 in 5 people have a disability, and blind or low-vision shoppers rely on screen readers to browse and buy. If your SVG logo, trust badge, or product icon has no text alternative, those shoppers cannot understand what it depicts — which directly harms their ability to trust and purchase from your store. Legally, WCAG 2.1 Success Criterion 1.1.1 (Non-text Content) is referenced in accessibility laws such as the ADA (USA), AODA (Canada), and EAA (EU); failing it exposes your business to demand letters, complaints, and lawsuits. Google's crawlers also consume alt text to understand image content, so fixing SVG alternatives can improve your image-search visibility and overall crawl quality.

See the complete Svg img alt guide for every platform and the full background.