How to fix svg img alt on Shopify

Steps for Shopify

1. Go to Online Store > Themes > (your active theme) > Actions > Edit code.
2. SVGs appear in multiple places: theme layout files (layout/theme.liquid), section files (sections/.liquid), snippet files (snippets/.liquid), and asset files (assets/*.svg). Use the search icon (🔍) in the code editor to search for '<svg' across files.
3. For each meaningful SVG, open the file, locate the `<svg>` opening tag, add `role="img"` and `aria-label="Descriptive text"` — e.g. `<svg role="img" aria-label="Store logo" …>`.
4. If the SVG is loaded from an asset file (e.g. via `{{ 'icon-cart.svg' | asset_url }}`), download the SVG asset, add `<title id="svg-title">Descriptive text</title>` as the first child of `<svg>`, re-upload it to Assets, and add `role="img" aria-labelledby="svg-title"` to the `<svg>` tag.
5. For decorative SVGs (dividers, background shapes), add `aria-hidden="true"` to the `<svg>` tag.
6. Save each file and preview the storefront; use Chrome DevTools > Accessibility tab to verify the accessible name appears.

What is svg img alt?

SVG files are vector images often used for logos, icons, badges, and illustrations on ecommerce sites. Unlike a regular `<img>` tag which has an `alt` attribute, an inline SVG element needs its own internal mechanism to carry a text description — either a `<title>` element nested inside it, an `aria-label` attribute on the `<svg>` tag itself, or a reference to external text via `aria-labelledby`. Without one of these, a screen reader either skips the image entirely or reads out meaningless code, leaving blind and low-vision shoppers without context for what the image conveys. WCAG Success Criterion 1.1.1 ("Non-text Content") requires that all meaningful images have a text alternative.

Screen readers are used by millions of shoppers with visual impairments, and an SVG without a text alternative is completely invisible to them — a missing logo, an unreadable trust badge, or a broken call-to-action icon. This directly harms conversions and user experience for a significant customer segment. From a legal standpoint, failing WCAG 1.1.1 is one of the most commonly cited violations in ADA and AODA accessibility lawsuits and demand letters targeting online stores; remediating it proactively protects you from costly litigation. Google's crawlers also partially interpret accessibility markup, so well-labelled SVG images can contribute to better understanding of your page content.

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