How to fix svg img alt on Squarespace

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

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