</>
ValidateHTML

Link With No Accessible Text

A link is announced to a screen reader by its text content. When the anchor contains only an icon, an image with no alt text, or nothing at all, there is nothing to announce: the user hears "link" and has to guess where it goes. Social icons, hamburger menus and card overlays are the usual culprits.

Find this error in your own code. Paste your HTML or enter a URL, free and instant.Open the checker
37.7%
of sites tested

How common is this error?

We ran this validator over the home page of the Tranco top 5,000 websites in August 2026. 1,001 of the 2,655 sites we could reach hit it. That makes it the 4th most common accessibility problem we found, across 9,598 occurrences. See the full study.

Most frequent wording: Anchor link must have a text describing its purpose

Why It Matters

Screen reader users often navigate by pulling up a list of every link on the page. Links with no text appear there as "link", indistinguishable from each other, which makes that list useless. This fails WCAG 2.4.4 (Link Purpose) at Level A. It was the second most common accessibility finding in our Tranco sample, on 36% of sites.

Common Causes

  • Icon-only social or navigation links built from an inline SVG or an icon font, with no text node anywhere inside.
  • A logo linking home through an <img> whose alt attribute is empty or missing.
  • A full-card overlay anchor, deliberately empty so it does not disturb the layout.
  • Sprite-based icons where the label was CSS-hidden with display:none, which removes it from the accessibility tree entirely.

Code Examples

Inaccessible
<!-- Nothing to announce -->
<a href="/twitter"><svg class="icon-twitter"></svg></a>

<!-- Image with no alt -->
<a href="/"><img src="logo.png"></a>

<!-- Empty overlay link over a card -->
<a href="/article/42" class="card-overlay"></a>
Accessible
<!-- Visually hidden text: works everywhere -->
<a href="/twitter"><svg class="icon-twitter" aria-hidden="true"></svg><span class="sr-only">Our Twitter profile</span></a>

<!-- Alt text on the image carries the link -->
<a href="/"><img src="logo.png" alt="ValidateHTML home"></a>

<!-- aria-label when there is no room for text -->
<a href="/article/42" class="card-overlay" aria-label="Read: How to fix unclosed tags"></a>

How to Fix

  • 1Prefer visually hidden text inside the anchor (a .sr-only span). It is announced by every assistive technology and survives translation tools, which aria-label does not always do.
  • 2If the link wraps an image, put the destination in the image's alt attribute rather than adding a separate label.
  • 3Use aria-label only when no text can exist in the markup, such as an invisible overlay link covering a card.
  • 4Mark the decorative icon itself aria-hidden="true" so it is not announced alongside your new label.
  • 5Describe the destination, not the gesture: "Our Twitter profile" beats "Click here" or "Read more".

Frequently Asked Questions

Does aria-label work as well as visible text?
It works, but it is more fragile. aria-label overrides the element's content entirely, is ignored by some translation tools, and cannot be seen by sighted users who rely on the label too. Prefer visually hidden text and keep aria-label for cases where no text can exist.
Why not just hide the text with display:none?
display:none and visibility:hidden remove the element from the accessibility tree, so the screen reader never sees it either. Use a visually-hidden utility that keeps the text rendered but clipped to one pixel, which is what Tailwind's sr-only and Bootstrap's visually-hidden do.
Is "Read more" acceptable link text?
It passes the automated check but fails the intent. In a link list, twenty "Read more" entries are as useless as twenty empty ones. Include the destination in the link text, or extend it with visually hidden text such as "Read more about pricing".

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker

Related Accessibility Errors

Missing Alt Text on Images

Missing alt text hides images from screen readers and Google Images. Learn why alt attributes matter for accessibility and SEO, and how to write them well.

Missing ARIA Labels on Interactive Elements

Without an aria-label, icon buttons and image links are invisible to screen readers. Learn when and how to use aria-label and aria-labelledby correctly.

Button With No Accessible Text

A button holding only an icon announces as "button" with no purpose. Learn how to label close, menu and search buttons without changing how they look.

View all accessibility errors