Svg img alt
Moderate effortFound on 5% of audited stores.
Add a meaningful text alternative to every SVG image so screen readers can describe it to visually impaired shoppers.
What it is
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.
Why it matters
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.
How to fix it
- Identify every SVG on the page that conveys meaning (logos, product badges, icons with labels, illustrations). SVGs used purely as decoration should be hidden from assistive technology entirely.
- For meaningful SVGs: add a `<title>` element as the very first child inside the `<svg>` tag containing a short, descriptive label (e.g. 'Free Shipping Badge'), then add `role="img"` and `aria-labelledby="[title-id]"` to the `<svg>` tag for maximum screen-reader compatibility.
- Alternatively, add `aria-label="Descriptive text here"` and `role="img"` directly on the `<svg>` opening tag — useful when you cannot edit the SVG's internal markup.
- For purely decorative SVGs (background shapes, dividers, pure-styling icons): add `aria-hidden="true"` to the `<svg>` tag so screen readers skip it completely, and remove any existing `role` attribute.
- Validate the fix using a browser accessibility tree (Chrome DevTools > Accessibility panel) or re-run the axe/WAVE scanner to confirm the rule no longer triggers.
- Spot-check with an actual screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on macOS/iOS) to hear how the image is announced.
Fix it on your platform
Pick your platform for the exact steps.
How to fix svg img alt on Shopify
- Go to Online Store > Themes > (your active theme) > Actions > Edit code.
- 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.
- 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" …>`.
- 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.
- For decorative SVGs (dividers, background shapes), add `aria-hidden="true"` to the `<svg>` tag.
- Save each file and preview the storefront; use Chrome DevTools > Accessibility tab to verify the accessible name appears.
How to fix svg img alt on WooCommerce
- SVGs in WooCommerce stores live in theme template files, plugin output, or the WordPress Media Library. First, check your active theme's folder (wp-content/themes/your-theme/) using a file manager or FTP client, or use the WordPress Customizer > Additional CSS / Theme Editor (Appearance > Theme File Editor — note: editing theme files directly risks being overwritten on update, so use a child theme).
- For theme SVGs: create or open your child theme, copy the relevant template file (e.g. header.php, footer.php, or a WooCommerce template), locate the `<svg>` tag, and add `role="img"` plus `aria-label="Descriptive text"`.
- For SVGs inserted via the Block Editor (Gutenberg): click the SVG/Image block, and in the Block settings sidebar under 'Alt text', enter a description. For SVG files uploaded to the Media Library, edit the Attachment page and fill in the Alt Text field.
- For plugin-generated SVGs (e.g. WooCommerce icon fonts or SVG badges), install the 'Safe SVG' plugin which sanitises uploads and allows you to edit SVG alt attributes. Then use a code snippet plugin (e.g. WPCode) to add a filter that injects `aria-label` attributes.
- For decorative SVGs in theme files, add `aria-hidden="true"` to the opening `<svg>` tag in your child theme template.
How to fix svg img alt on 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.
How to fix svg img alt on Wix
- In the Wix Editor, click on the SVG element (vector art, icon, or logo) on your page to select it.
- In the element settings panel, look for 'Accessibility' settings (available on most elements via the right-click menu > Accessibility, or the element's Settings panel). Enter a descriptive label in the 'ARIA Label' field.
- For SVGs added as Vector Art from the Wix library: right-click the element > Accessibility Settings > fill in the 'Label (aria-label)' field with a meaningful description.
- For purely decorative SVGs, set the element's role to 'None / Decorative' in the same Accessibility Settings panel, which causes Wix to render it with `aria-hidden="true"`.
- If you are using Wix Studio (advanced), you can directly set ARIA attributes in the Properties panel under Accessibility for each element.
- Publish the site and verify with an accessibility checker tool or browser extension.
How to fix svg img alt on Squarespace
- Squarespace renders most icons and logos as inline SVGs that you cannot directly edit in the visual editor. For your site logo: go to Pages > Website Tools (or Design) > Logo & Title and re-upload your logo as a PNG or SVG; Squarespace wraps it in an `<img>` tag where you can set alt text under Design > Logo.
- For SVGs embedded via a Code Block: Pages > (your page) > Edit > add or open a Code Block > edit the raw SVG HTML directly to include `role="img"` and `aria-label="Description"` on the `<svg>` tag, or nest `<title id="t1">Description</title>` inside it and reference it with `aria-labelledby="t1"`.
- For theme-generated SVG icons (social icons, navigation arrows), inject a CSS/JS fix via Settings > Advanced > Code Injection > Header: add a small JavaScript snippet that selects the SVGs by class and sets `setAttribute('aria-label', 'Description')` and `setAttribute('role', 'img')` for each.
- For decorative SVGs, use Code Injection to add a script that sets `setAttribute('aria-hidden', 'true')` on the relevant SVG elements.
- Test with Chrome's Accessibility panel after publishing.
How to fix svg img alt on Webflow
- In the Webflow Designer, click on the SVG element (Icon, SVG embed, or image set to an SVG file) to select it.
- In the Element Settings panel (the gear icon on the right), scroll to the 'Accessibility' section. Set 'Role' to 'img' and type a meaningful description in the 'Label (aria-label)' field.
- For SVGs embedded via an Embed component (raw HTML): double-click the Embed block, locate the `<svg>` tag in the HTML editor, and manually add `role="img"` and `aria-label="Descriptive text"` to the opening tag, or add `<title id="t1">Descriptive text</title>` as the first child and `aria-labelledby="t1"` to `<svg>`.
- For decorative SVGs, in the Accessibility section of Element Settings, set 'State' to 'Decorative (hidden from assistive tech)' — Webflow adds `aria-hidden="true"` automatically.
- Publish and verify using the Webflow built-in accessibility panel or Chrome DevTools > Accessibility.
How to fix svg img alt on Adobe Commerce (Magento)
- SVGs in Adobe Commerce live in theme directories under app/design/frontend/<Vendor>/<theme>/web/images/ (SVG asset files) and in .phtml template files or layout XML. Use your IDE or FTP to navigate there.
- For inline SVGs in .phtml templates: open the relevant template file, locate the `<svg>` element, and add `role="img"` and `aria-label="<?= $escaper->escapeHtmlAttr(__('Descriptive text')) ?>"` to the opening tag — using the escaper and translation helper for best practice.
- For SVG asset files referenced in templates or CSS: open the SVG in a text editor, add `<title id="svg-t1">Descriptive text</title>` as the first child of the root `<svg>` element, add `role="img" aria-labelledby="svg-t1"` to the `<svg>` tag, and save. Then run `bin/magento setup:static-content:deploy` to republish static assets.
- For decorative SVGs, add `aria-hidden="true"` to the `<svg>` tag in the relevant .phtml file or SVG asset.
- Flush caches: Admin > System > Cache Management > Flush Magento Cache (or `bin/magento cache:flush`).
- Verify in the browser using axe DevTools or Chrome Accessibility panel.
How to fix svg img alt on Headless / Custom (I build in code)
- Locate every `<svg>` element in your component library or template files.
- For meaningful SVGs: add `role="img"` to the `<svg>` tag; add `<title id="[unique-id]">Short descriptive text</title>` as the first child element inside `<svg>`; add `aria-labelledby="[unique-id]"` to the `<svg>` tag. If a longer description is needed, also add `<desc id="[desc-id]">Longer description</desc>` and include that id in `aria-labelledby` (space-separated).
- As a simpler alternative to the title element approach, add `aria-label="Descriptive text"` and `role="img"` directly on the `<svg>` opening tag.
- For decorative SVGs: add `aria-hidden="true"` and remove any existing `role` attribute and `<title>` element.
- In React/Vue/Angular component libraries, create a reusable SVG wrapper component that enforces either an `aria-label` prop or `aria-hidden` so developers cannot accidentally ship unlabelled meaningful SVGs.
- Run axe-core (programmatically or via browser extension) in CI to catch regressions.
Does your site have this issue?
Run a free SEOLZ scan to find svg img alt — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does svg img alt matter?
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.
How do I fix svg img alt?
Add a meaningful text alternative to every SVG image so screen readers can describe it to visually impaired shoppers.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Images & text alternatives — W3C WAI
- ARIA basics — MDN