How to fix svg img alt on Webflow

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

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