How to fix links with no text in Shopify (icons, logo, social links)

A link with no text is a link that screen readers announce only as "link", or read out as a file name or a long web address. In Shopify stores it is almost always an icon or an image: the social media icons in the footer, the store logo, a product image that links to the product, or an app badge. A FixRamp scan reports it as "Links have no text"; axe calls it "Links must have discernible text" and Lighthouse "Links do not have a discernible name". The fix is a short name that says where the link goes. It is common: in our scan of 501 Shopify homepages, half of the stores (50%) had at least one link with no text.

The short answer

• Give every icon or image link a name, using visually hidden text, aria-label, or the image's alt text.
• Make the name say where the link goes: "Instagram", "Home", "Linen overshirt", not "icon" or "click here".
• Hide decorative icons inside the link from screen readers with aria-hidden="true".

Why it matters

WCAG success criterion 2.4.4 Link Purpose (In Context) requires that "the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context". W3C lists a link whose only content is an image with no text alternative as a failure of this criterion (F89). The axe rule link-name also maps to 4.1.2 Name, Role, Value.

A screen reader user often moves through a page by its list of links. If the footer reads "link, link, link, link", they can't tell Instagram from TikTok, or find the way back to the home page.

Where these links hide in Shopify themes

How to fix it

Your developer adds a name inside or on the link. Any one of these works:

<!-- Option 1: visually hidden text (works well with translations) -->
<a href="https://instagram.com/yourstore">
  <svg aria-hidden="true" focusable="false">…</svg>
  <span class="visually-hidden">Instagram</span>
</a>

<!-- Option 2: aria-label -->
<a href="https://instagram.com/yourstore" aria-label="Instagram">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

<!-- Option 3: alt text on the image inside the link -->
<a href="/">
  <img src="logo.png" alt="Your Store Name, home">
</a>

The logo link

The logo usually links to the home page, so its alt text becomes the link's name. Many themes use the logo image's alt text and fall back to the store name when it is empty. Check what your theme announces with a screen reader. If the logo is an inline SVG in the theme code, the developer adds visually hidden text with the store name inside the link.

Product image links

When a product card has an image link and a title link to the same product, the best fix is one link that wraps both the image and the title, with alt="" on the image so the name isn't read twice. If they must stay separate, give the image link aria-hidden="true" and tabindex="-1" so only the title link is announced, or give the image alt text that names the product. When the image is the only link, its alt text must name the product. See our guide to missing alt text on Shopify.

Translations

In Shopify themes, use a translation string rather than hard-coded English, so the label changes with the store's language:

<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>

Check that the key exists in your theme's locales/en.default.json before using it.

Links added by apps

If the unnamed link comes from an app, you usually cannot edit its code. Report it to the app developer with the exact element, or check whether a newer version fixes it.

WooCommerce stores

The same fixes apply. Social icons often come from the theme's customizer or a widget plugin, and the logo from Appearance > Customize > Site Identity. Set the logo image's Alternative Text in the Media Library, or add aria-label in a child theme template.

How to check your fix

1. Run a free scan of your home page and a collection page. Look for "Links have no text". The free scan shows the most serious issues on the page you enter, so it may not appear if others rank higher.
2. With a screen reader, open its list of links (the rotor in VoiceOver, or Insert+F7 in NVDA) and check that every link has a name you'd understand out of context.
3. Check the footer and header on mobile too: themes often use different markup for small screens.

Related guides: buttons with no name in Shopify and low color contrast in a Shopify theme. A FixRamp report shows how many unnamed links each page has, grouped by template, with examples and the fix.