Empty Anchor Text Example
I struck a spark from my own eye to light the powder and pointed, in the dark, at nothing at all.
The short answer
- What it is
- Empty anchor text means a link has no visible words, no image with alt text, and no aria-label. It works as a click target but has no name.
- Why it matters
- Screen readers can only say the word link or read out the raw URL. Search engines also lose a useful clue about the target page.
- How a crawler should report it
- Report one row per link with the source page, target URL, and a snippet of the link's markup. Count a link as named if it has text, an image with non-empty alt, or an aria-label, and mark the rest as also an accessibility fault.
- Live examples
/lab/empty-anchor/(positive)/lab/empty-anchor/near-miss/(near miss)
Links That Have Nothing to Say for Themselves
Empty anchor text is what you get when a link wraps nothing a machine can read. The markup might be <a href="/cart/"></a>, with an icon added by CSS. To a sighted user, the page looks fine. The link still has a target, but it has no name. Common causes are icon fonts, SVG icons with no label, background images, and images with an empty alt value.
Other causes come from how a page is built. A card layout may wrap an empty link over a whole block, using CSS to stretch it. A CMS can leave an empty link behind when an editor deletes the words but not the tag. JavaScript may fill in the link text later, and it can fail to run. Social media icons in the footer are the classic case, and they often appear on every page.
A screen reader announces a link with no name in an unhelpful way. Some say only "link," while others read out the whole URL. That fails WCAG rules on link purpose and on naming controls. Search engines use anchor text to learn what a target page is about. For a linked image, Google uses the alt text in the same way. An empty link gives them nothing, and it wastes the chance to describe the target.
To detect the issue, parse each link and compute its name from visible text, image alt, and aria-label. Flag any link where the result is blank. Test in a browser's accessibility panel for tricky cases. To fix it, add real words where you can. For an icon link, add alt text to the image or an aria-label that says where the link goes, such as "Shopping cart." Remove any leftover empty tags. Then fix the template, so the same fault doesn't return on every page.