How to fix: empty links and image-only links

What it looks like in the wild

Screen reader announces "link" with no destination context.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Every link needs text content or an aria-label describing its purpose.

The wrong pattern (avoid)

<a href="/cart"><img src="/cart.svg"></a>

The right pattern (copy this)

<a href="/cart" aria-label="View cart with 3 items">
  <img src="/cart.svg" alt="">
</a>

Notes from real audits

• The aria-label completely overrides visible text — make sure the label is complete and descriptive.

• Dynamic labels (e.g. "View cart with 3 items") must update when the count changes — use JavaScript to keep aria-label in sync.

• If a link wraps both an image and visible text, the visible text alone may be sufficient without aria-label.

• Voice control users say the visible text, so aria-label must start with or contain the visible label per WCAG 2.5.3.