SEOLZ

Svg img alt

Moderate effort

Found on 3% 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 (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.

Why it matters

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.

How to fix it

  1. Identify every SVG on your site that conveys meaningful information (logos, icons with meaning, product images, badges, charts) — as opposed to purely decorative shapes.
  2. For each meaningful SVG, open the raw SVG markup and add a `<title>` element as the very first child inside the `<svg>` tag; give it a short, descriptive label (e.g. 'Free Shipping Badge' or 'Company Logo').
  3. Add a unique `id` to the `<title>` element (e.g. `id='free-shipping-title'`) and add `aria-labelledby='free-shipping-title'` to the parent `<svg>` tag so assistive technologies reliably announce the name.
  4. Add `role='img'` to the `<svg>` tag to explicitly tell screen readers to treat it as an image.
  5. For purely decorative SVGs (dividers, background shapes, etc.) that carry no meaning, instead add `aria-hidden='true'` to the `<svg>` tag so screen readers skip them entirely.
  6. Test with a free screen reader (NVDA on Windows, VoiceOver on Mac/iOS) or a browser accessibility extension to confirm the text alternative is announced correctly.
<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>

Fix it on your platform

Pick your platform for the exact steps.

How to fix svg img alt on 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.
Full Shopify guide →Official Shopify docs ↗
How to fix svg img alt on WooCommerce
  1. In WordPress Admin go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
  2. Find the file containing the SVG — often `header.php`, a page-builder block, or an SVG sprite file in the theme's `/assets/` or `/images/` folder.
  3. Edit the `<svg>` tag to add `role='img'` and `aria-labelledby='UNIQUE-ID'`; insert `<title id='UNIQUE-ID'>Descriptive text</title>` as its first child.
  4. If SVGs are embedded via the WordPress Media Library or a page builder (Elementor, Divi), you may need to use a plugin such as 'Safe SVG' which allows editing SVG markup directly, or add custom CSS/JS to inject the attributes.
  5. For inline SVGs in Gutenberg blocks, switch to the Code Editor view of the block and add the title and ARIA attributes manually.
  6. Test using the axe DevTools browser extension or a screen reader.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix svg img alt on BigCommerce
  1. Go to Storefront → My Themes → (active theme) → Advanced → Edit Theme Files.
  2. SVGs typically live in `templates/components/` (e.g. `icon.html`) or in the `assets/icons/` directory as `.svg` files.
  3. Open the relevant `.html` or `.svg` file and add `role='img'` and `aria-labelledby='UNIQUE-ID'` to the `<svg>` tag; add `<title id='UNIQUE-ID'>Descriptive text</title>` as its first child.
  4. For decorative SVG icons (arrows, UI chrome), add `aria-hidden='true'` and `focusable='false'`.
  5. Save changes and preview the storefront; validate with the axe browser extension.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix svg img alt on Wix
  1. Wix renders SVGs through its own vector-art and icon components; direct SVG markup editing is not available in the standard editor.
  2. For SVG icons used as decorative elements, select the element → click the Accessibility icon in the toolbar → check 'Decorative image' to suppress it from screen readers.
  3. For meaningful SVG images (logos, badges), select the element → click the Accessibility (person) icon → set a descriptive 'Image Alt Text' label in the field provided.
  4. For complex inline SVGs you control (e.g. embedded via Wix Velo / custom HTML component), open the HTML component and add the `<title>` + `aria-labelledby` + `role='img'` pattern directly in the embed code.
  5. Test using Wix's built-in accessibility checker (under the Help menu) or the axe browser extension in preview mode.
Full Wix guide →Official Wix docs ↗
How to fix svg img alt on Squarespace
  1. Squarespace compiles SVG icons internally; you cannot directly edit SVG markup in most block types.
  2. For SVGs uploaded as images (PNG/SVG uploads via the Image Block), click the image → Edit → fill in the 'Alt text' field with a descriptive label.
  3. For built-in SVG icons (social icons, logo marks), go to Design → Logo & Title and upload an SVG logo; Squarespace wraps it with an accessible label based on your site title — verify this is meaningful.
  4. For custom SVGs injected via Code Blocks (Settings → Advanced → Code Injection or a Code Block on a page), add the `<title>` + `aria-labelledby` + `role='img'` pattern directly in your HTML.
  5. Test in Preview mode with the axe browser extension.
Full Squarespace guide →Official Squarespace docs ↗
How to fix svg img alt on Webflow
  1. In the Webflow Designer, select the SVG element on the canvas.
  2. In the Element Settings panel (the gear icon on the right), find the 'Alt Text' field for SVG Image elements — fill in a descriptive label; Webflow will render this as an accessible attribute.
  3. For SVGs embedded as HTML Embed components (</> icon), click the embed → open the code editor → manually add `role='img'`, `aria-labelledby='UNIQUE-ID'`, and `<title id='UNIQUE-ID'>Descriptive text</title>` as the first child of the `<svg>`.
  4. For decorative SVGs, set Alt Text to empty ('') or, in an HTML Embed, add `aria-hidden='true'` and `focusable='false'` to the `<svg>` tag.
  5. Publish and validate with the axe browser extension.
Full Webflow guide →Official Webflow docs ↗
How to fix svg img alt on Adobe Commerce (Magento)
  1. SVG icons and logos are typically stored in your theme at `app/design/frontend/<Vendor>/<Theme>/web/images/` or within `.phtml` template files.
  2. Locate the template rendering the SVG (e.g. `Magento_Theme/templates/html/header.phtml` for the logo).
  3. Edit the `<svg>` tag in the template to add `role='img'` and `aria-labelledby='UNIQUE-ID'`; insert `<title id='UNIQUE-ID'>Descriptive text</title>` as the first child element.
  4. For SVG sprites or icon fonts managed in `Magento_Ui`, edit the relevant UI component template or override it in your custom theme.
  5. For decorative SVGs, add `aria-hidden='true'` and `focusable='false'` to the `<svg>` tag.
  6. Run `bin/magento cache:flush` after changes, then test in a browser with the axe extension or a screen reader.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find svg img alt — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

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.

Why does svg img alt matter?

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.

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

Related Accessibility (WCAG) issues