We respect your privacy.

We use strictly necessary cookies to keep you signed in and to protect against CSRF. With your permission we also use a small amount of first-party analytics to improve the product. We do not sell your data and we do not use third-party advertising trackers. See our cookie policy and privacy policy .

Crawlmind
← All learn topics

Rule page.accessibility.link-text-empty

Add accessible text to empty links

page.accessibility.link-text-empty is a check in Crawlmind's site audit that grades medium-impact issues of this kind. This page explains why the rule matters and the exact fix.

Impact: mediumEffort: lowFixable: 1-click

Why it matters

An `<a>` with no text content (just an icon, an empty span, or whitespace) is invisible to screen readers and to AI crawlers: they can't tell where it goes. WCAG 2.4.4 (Link Purpose) requires that link purpose be determinable from the link text or context.

The fix

```html
<!-- Wrong: icon-only link with no accessible text -->
<a href="/twitter"><svg>…</svg></a>

<!-- Right: visually-hidden text -->
<a href="/twitter">
  <svg aria-hidden="true">…</svg>
  <span class="sr-only">Follow on Twitter</span>
</a>

<!-- Or aria-label when the icon is the only content -->
<a href="/twitter" aria-label="Follow on Twitter">
  <svg aria-hidden="true">…</svg>
</a>
```

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

References