Skip to content
StoreA11y

Shopify · 2.4.4 Link Purpose (In Context) (Level A)

Links with no discernible text on Shopify

Some links have no readable text. A screen reader reaches them and announces "link" with nothing after it. This is usually an icon-only link — a cart, a search magnifier, a social icon — where the icon is an SVG or a background image with no label.

Frequently litigated

Unlabelled links — usually cart and search icons — are cited in a large share of filed complaints.

Which WCAG criterion this fails

  • Does not meet 2.4.4 Link Purpose (In Context) (Level A)
  • Does not meet 4.1.2 Name, Role, Value (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Find the offending selector from the finding below in Online Store > Themes > Edit code.
  2. Icon-only links: add an aria-label describing the destination, e.g. aria-label="Cart, 3 items" or aria-label="Search".
  3. Alternatively add visually hidden text inside the link using the theme's existing class — Dawn ships `.visually-hidden`, most themes have `.sr-only` or `.screen-reader-text`.
  4. If the link wraps an <img>, giving the image real alt text fixes the link at the same time — do not do both, or it will be announced twice.
  5. Do not "fix" this with title="" — most screen readers do not announce title on links reliably.

Where this usually lives

sections/header.liquid (cart and search icons), snippets/icon-*.liquid, sections/footer.liquid (social icons)

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Before: screen reader says "link" -->
<a href="/cart"><svg>…</svg></a>

<!-- After: option A, aria-label -->
<a href="/cart" aria-label="Cart, {{ cart.item_count }} items">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

<!-- After: option B, visually hidden text -->
<a href="/cart">
  <svg aria-hidden="true" focusable="false">…</svg>
  <span class="visually-hidden">Cart</span>
</a>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: link-name (axe-core).