How to fix svg img alt on Adobe Commerce (Magento)

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

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