How to fix empty links

Why an "empty" link is a dead end

Screen-reader users navigate by pulling up a list of every link on a page and jumping between them. A link with no discernible text shows up in that list as just "link" — or worse, as a raw URL. It's the equivalent of a signpost with nothing written on it. Two WCAG criteria cover this: 2.4.4 Link Purpose (In Context, Level A) and 4.1.2 Name, Role, Value (Level A). The axe rule that catches it is link-name, and it's one of the most common serious issues we see on otherwise-polished marketing sites.

The five ways links go nameless

1. Icon-only links with no label

A link containing only an SVG or icon font, with no text and no label, is invisible to assistive tech.

<a href="https://twitter.com/acme">
  <svg>...</svg>
</a>

<a href="https://twitter.com/acme" aria-label="Acme on Twitter">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

2. Image links with an empty alt

An <img> is the only thing inside the link, but its alt is empty — so the link has no name at all. When an image is the link, its alt must describe the destination.

<a href="/"><img src="logo.svg" alt=""></a>

<a href="/"><img src="logo.svg" alt="Acme — home"></a>

3. Text hidden the wrong way

Developers sometimes hide link text with display:none or visibility:hidden — but those remove it from the accessibility tree too, so the name disappears. Use a visually-hidden utility that keeps the text available to screen readers.

<a href="/rss">
  <span class="sr-only">Subscribe via RSS</span>
  <svg aria-hidden="true">...</svg>
</a>

4. Whitespace-only or wrapper links

A "card" wrapped in an anchor where the actual heading and text sit in a second, separate link — or an empty <a></a> used purely for a click target — leaves the wrapper nameless. Give the wrapper an aria-label, or restructure so the visible heading lives inside it.

5. Vague link text

"Click here", "read more", and "learn more" repeated fifteen times aren't empty, but out of context they fail the spirit of 2.4.4. Prefer text that describes the destination: "Read the BFSG overview" instead of "read more".

A quick self-test

Tab through your page and read only the link text aloud, ignoring everything around it. If any link is silent or you can't tell where it goes, that's the failure a screen-reader user hits — now with the surrounding context stripped away, just as their link-list view presents it.

How our scanner detects it

For every <a> with an href, we compute its accessible name the way a browser does: visible text, then aria-label / aria-labelledby, then the alt of a contained image, then title. If that computation yields an empty string, the link fails link-name and we report it with its selector and markup. Vague-but- present text (case 5 above) is trickier — the name exists, so it passes the automated check, and we surface it as something worth a manual review rather than a hard failure.