Adding alt text to SVG images

Ask & Offer
1

I have two SVG images in my store header linking to the Account and Search pages. I need to add alt text to them for accessibility reasons, but can’t figure out how. I’ve tried the below:

Screenshot 2025-12-01 at 4.32.45 PM
Screenshot 2025-12-01 at 4.32.45 PM2580×472 82.8 KB

Screenshot 2025-12-01 at 4.32.14 PM
Screenshot 2025-12-01 at 4.32.14 PM2222×674 164 KB

Any suggestions? Thanks so much!

2

Hi @kate_zmc I’m @PaulNewton shopify-partner that does theme customizataions.

The <desc>, or title, is suitable for SVG’s.
Otherwise in your screenshot it shows the alt text is hardcodeds to “Click here to go to…” etc

If you need this customized beyond that then reach out to me for customization services.
CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

3

Hi @kate_zmc

Accessibility is important and there are a few simple ways to add readable text for screen readers depending on how the SVGs are used in your header. Below I give short, copy-pasteable fixes for the 3 common cases (external SVG file via <img>, inline SVG markup, and CSS background images). Pick the one that matches your theme markup.

If the icon is an <img src="…svg">

Edit the header (or snippet) where the icon is output and add an alt on the <img>:

<!-- BEFORE -->
<a href="/account" class="site-header__icon">
  <img src="{{ 'icon-account.svg' | asset_url }}">
</a>

<!-- AFTER -->
<a href="/account" class="site-header__icon" aria-label="Account">
  <img src="{{ 'icon-account.svg' | asset_url }}" alt="Account">
</a>
  • Use plain descriptive text: "Account" / "Search".
  • Keep aria-label on the <a> if you prefer the link itself to be announced (useful if the image is decorative or has no accessible text).

If the SVG is inline in the HTML (common in modern themes)

Inline SVGs need an accessible name. Add a <title> inside the <svg> and link it with aria-labelledby, or add role="img" + aria-label.

<!-- BEFORE -->
<a href="/account" class="site-header__icon">
  <svg viewBox="0 0 24 24" class="icon-account">
    <!-- svg paths -->
  </svg>
</a>

<!-- AFTER (preferred: aria-labelledby + title) -->
<a href="/account" class="site-header__icon">
  <svg viewBox="0 0 24 24" class="icon-account" role="img" aria-labelledby="icon-account-title">
    <title id="icon-account-title">Account</title>
    <!-- svg paths -->
  </svg>
</a>

Or with aria-label directly:

<svg role="img" aria-label="Account" viewBox="0 0 24 24" class="icon-account">
  <!-- svg paths -->
</svg>

Important: If you have multiple identical SVGs on the page, use unique id values for each <title> (e.g. icon-account-title-1) to avoid collisions.

If the icon is added via CSS background-image (or an empty <span>)

Background images are not announced by screen readers. Provide an accessible text node inside the link — visually hidden but available to assistive tech:

Add CSS for visually-hidden (if not already present):

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}