How to fix svg img alt on BigCommerce
Add a meaningful text alternative to every SVG image so screen readers can describe it to visually impaired shoppers.
Steps for BigCommerce
- Go to Storefront > My Themes > (active theme) > Advanced > Edit Theme Files (or Download to edit locally).
- SVGs typically appear in templates/layout/base.html, templates/components/, and assets/img/ directories. Search for '<svg' across template files.
- For inline SVGs in .html template files: locate the `<svg>` tag and add `role="img"` and `aria-label="Descriptive text here"` to the opening tag.
- For SVG files referenced as assets, download the SVG, open it in a text editor, add `<title id="t1">Descriptive text</title>` as the first child of the root `<svg>` element, add `role="img" aria-labelledby="t1"` to the `<svg>` tag, then re-upload to assets/img/.
- For decorative SVGs, add `aria-hidden="true"` to the `<svg>` tag.
- Save/upload changes and use the Preview option to verify; run axe DevTools in your browser to confirm the violation is resolved.
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.
Not sure if your BigCommerce store has this?
Run a free SEOLZ scan — we’ll find svg img alt and every other issue across your whole site.
Scan my site free