Link has no discernible text / empty link (WCAG 2.4.4)

What’s actually happening

A screen reader hits the link and, with no text to read, falls back to announcing the href character by character — "link, h-t-t-p-s colon slash slash...". Pull up the page's list of links (a common way blind users skim a site) and you get a column of identical "link" entries or naked URLs, none of which say where they lead. Icon-only links — a bare Twitter glyph, a cart, a hamburger — are the classic source. The click target works for a mouse; it's mute to everyone else.

Common causes

• An icon font or inline SVG is the only thing inside the <a>, with no text and no label
• An image link whose <img> has no alt (or alt=""), so there's nothing for the link to inherit a name from
• An empty anchor used purely as a JS click hook — <a href="#"></a> styled as a button
• A "read more" link that's been CSS-collapsed to an icon, dropping the visible text that named it
• aria-hidden="true" left on the only element inside the link, which removes its text from the accessibility tree

How to fix it

1. Add visible text, or a visually-hidden label if the design is icon-onlyThe cleanest fix is real text inside the anchor: <a href="/cart">Cart</a>. When the design demands an icon alone, keep the words in the DOM but hide them visually with an sr-only class — <a href="/cart"><svg ...></svg><span class="sr-only">Cart</span></a>. Use clip-based hiding, never display:none or visibility:hidden, which also hide it from screen readers.
2. Give image links real alt textIf the link wraps an image, the alt text becomes the link's name. Write alt to describe the destination, not the picture: alt="Home" on a logo that links home, not alt="company logo". An empty alt on an image link leaves the link nameless.
3. Label SVG and icon-font links directlyFor an inline SVG, either add a <title> as the SVG's first child and reference it, or put aria-label="Open menu" on the <a> itself and aria-hidden="true" on the decorative glyph. For icon fonts (Font Awesome and the like), the pseudo-element has no text, so aria-label on the anchor is mandatory.
4. Don't ship empty anchors as buttons<a href="#"></a> that only fires JavaScript isn't a link — it's a control with no name and no real destination. If it performs an action, make it a <button> with text or an aria-label. If it navigates, give it a real href and a name.
5. Verify in the accessibility tree, not just the DOMRe-run axe or Lighthouse, then open the DevTools Accessibility pane and confirm the link's computed Name is filled in. A stray aria-hidden on the wrong node, or a label that didn't survive a framework re-render, shows up here even when the source looks correct.