How to fix svg img alt on WooCommerce

Steps for 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.

<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.