Annex

Fixing Link Purpose (In Context) on Shopify (WCAG 2.4.4)

Where a link goes should be clear from its text, or from the immediate context around it.

Why it matters

Screen reader users often navigate by pulling up a list of every link on the page. If each product card links out with the word 'Details', that list is the same word twenty times over and the catalogue cannot be browsed. The same fix helps search engines understand what each link points at.

Shopify — where to look

Theme code: snippets/card-product.liquid and product grid templates; header icon links.

What to do

Use one link per card rather than separate links on the image and the title. Dawn does this with a single title link carrying a full-unstyled-link class that CSS stretches over the whole card, so the card is one target with one accessible name. Give icon links an aria-label or visually hidden text.

Verification status

Checked by reading the platform’s own source code. Dawn emits a single anchor per card (full-unstyled-link) plus visually hidden text, not two competing links.

Source: https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Use a browser extension to list every link on the page. Read the texts alone — is each destination clear?
  2. Tab through a product listing and check that at each stop you know where you would end up.
  3. Look for links with the same text pointing to different places.

Other platforms

The full criterion

Read the full explanation of WCAG 2.4.4 Link Purpose (In Context), or the formal W3C definition.