Link name

What it is

Every hyperlink on a webpage must have a meaningful text label that screen readers can announce to blind or low-vision users. A link's accessible name can come from the visible text inside it, an image's alt text, an `aria-label` attribute, or an `aria-labelledby` reference. When a link contains only an icon, an image with no alt text, or an empty `<a>` tag, screen readers have nothing meaningful to say — they may just announce "link" or skip it entirely. WCAG Success Criterion 2.4.4 ("Link Purpose – In Context") requires that every link's purpose can be determined from its label alone or from its surrounding context.

Why it matters

Links without accessible names fail WCAG 2.4.4 (Level AA), which is the legal accessibility standard referenced in the ADA, Section 508 (US), EN 301 549 (EU), and similar laws worldwide — exposing your store to demand letters, complaints, and lawsuits that are increasingly common in ecommerce. Beyond legal risk, screen-reader users (estimated at 7–8 million in the US alone) simply cannot navigate your store's menus, product cards, or checkout links, costing you real customers and revenue. Search engines also use link anchor text as a ranking signal; unnamed links are dead weight that dilutes your internal linking strategy and can suppress category and product page rankings. Fixing this issue improves accessibility, SEO, and conversion simultaneously.

How to fix it

1. Audit your site for links that contain only an icon, an image, or are completely empty — common culprits are social-media icon links, 'Read More' buttons without context, image-only banners, and navigation icon buttons (hamburger menus, cart icons, close buttons).
2. For text links that are too vague (e.g. 'Click here', 'Read more'), rewrite the visible anchor text to describe the destination or action, e.g. 'Read more about our return policy'.
3. For icon-only or image-only links, add an aria-label attribute to the <a> tag that describes the destination, e.g. <a href='/cart' aria-label='View your shopping cart'>…icon…</a>.
4. For linked images, ensure the <img> tag inside the <a> has a descriptive alt attribute that conveys the link destination, e.g. alt='Shop Women's Running Shoes'. If the image is purely decorative and text nearby already names the link, use alt='' so screen readers skip the image and read the surrounding text instead.
5. If you want the label text to exist in the DOM but stay visually hidden, wrap it in a visually-hidden CSS class (position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;) rather than display:none or visibility:hidden, which hide it from screen readers too.
6. After making changes, re-test with a free tool (axe DevTools browser extension, NVDA + Chrome, or VoiceOver + Safari) to confirm every link now announces a clear, unique purpose.

<a href="/collections/shoes" aria-label="Shop Women's Running Shoes">
  <!-- icon or image with no visible text -->
  <img src="shoes-banner.jpg" alt="">
</a>

<!-- OR: visually-hidden text technique -->
<a href="/pages/returns">
  <svg aria-hidden="true" focusable="false">…</svg>
  <span class="visually-hidden">View our return policy</span>
</a>

/* Visually-hidden utility class */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Web accessibility tutorials — W3C WAI
• ARIA basics — MDN