WCAG 2.4.4 (A)

Links have no discernible text

What this failure is

Every clickable link needs text that says where it goes. When a link wraps only an image with no alt, or only a decorative icon, or contains just whitespace, screen readers announce it as "link" and read out the URL — often a long slug like "link, slash products slash unisex hyphen cotton hyphen tee hyphen navy hyphen medium". A screen reader user pulling up the links list on a product-grid page will see thirty entries all called "link" and no way to tell them apart. Sighted users work it out from the surrounding product image; non-sighted users cannot.

Reference: WCAG 2.4.4 (A) — the authoritative spec.

Who it affects

How to fix it

Concrete steps for the four platforms most small e-commerce sites run on. If you use a different stack, the underlying HTML change is the same.

Shopify

The most common source is a product card where the image and the title are two separate links — the image link has no text and no alt on the wrapped image. Open Online Store > Themes, click the horizontal menu icon next to your theme, choose Edit code, find snippets/card-product.liquid (Dawn already wires the link up with aria-labelledby that points at the card heading), and confirm your theme does the same or add alt text to the image inside the anchor. For social-media icon rows in the footer, add aria-label="Instagram", aria-label="Facebook" to each anchor, or place a <span class="visually-hidden">Instagram</span> inside the link so the accessible name survives translation.

WooCommerce

WooCommerce's product loop wraps the product thumbnail in an <a> tag. The link inherits its name from the image alt text — so if your products have missing or empty alt, the link becomes nameless. Fix the alt (Media > Library > select image > Alternative Text) and the link problem resolves. For footer social icons and cart-icon widgets, edit the widget and either add visible text or wrap the icon in <span class="screen-reader-text">Cart</span> — the screen-reader-text class was added to WordPress core in 2015 as the standard way to expose an accessible name to screen readers without showing it visually (see the Make WordPress Accessible handbook).

Wix

In the Wix Editor, the accessible name for a link comes from the visible link text or, for image links, from the image's alt text (What's in the image? field under the image's Settings). Set that text to a phrase that describes the destination, such as "Read the full blog post about winter cycling". Wix's dedicated ARIA-attribute panel currently only exposes a limited set of element types (containers, text, repeaters and similar) and does not offer an ARIA-label field on plain links — so make sure image-link alts and visible link text carry the meaning. The Accessibility Wizard flags links with no discernible name so you can find and rewrite them.

Squarespace

The most common Squarespace culprit is a footer social-media row where a designer replaced the built-in block with custom image links. Use the built-in Social Links block instead: it pulls its URLs from the Social Links panel (open Settings, then Social Links) and labels each icon automatically. For image blocks that act as links, click the image, open the Content tab, add the Clickthrough URL, and fill in Image alt text — the alt becomes the link's accessible name.

Notes

"Read more", "click here" and "learn more" are technically discernible text but are widely considered poor practice because a screen reader user pulling up the links list sees ten identical "read more" entries. Prefer "Read the return policy", "Read our shipping FAQ" and so on. The scanner does not flag these, but it is worth fixing while you are in the code.

Check your own site

Our accessibility statement scan is free and reports findings only — we do not certify sites.

Scan a URL