Screen reader users navigate sites by tabbing through links and hearing them announced. A link without a name is announced simply as "link," forcing users to guess its destination.

What's Happening

Lighthouse flags anchor elements (<a>) that have no accessible name. This happens when links contain only images without alt text, use CSS background images, or have empty content. The audit checks for text content, aria-label, aria-labelledby, or alt text on child images. Without any of these, the link becomes a mystery to assistive technology users.

Diagnose

1. Open DevTools and run Lighthouse accessibility audit
2. Expand "Links do not have a discernible name"
3. Click each flagged link to locate it in the DOM
4. Check the Elements panel for: inner text, aria-label, or images with alt text
5. Use the Accessibility tab in DevTools to see the computed accessible name

Fix

1. Add Visible Link Text

The clearest solution is descriptive text content inside the link.

<!-- Before: empty link -->
<a href="/pricing"></a>

<!-- After: visible text -->
<a href="/pricing">View pricing plans</a>

<!-- Before: generic text -->
<a href="/report.pdf">Click here</a>

<!-- After: descriptive text -->
<a href="/report.pdf">Download annual report (PDF)</a>

2. Add aria-label for Icon-Only Links

When visual design requires icon-only links, use aria-label.

<!-- Before: icon link with no name -->
<a href="https://twitter.com/mycompany">
  <svg class="icon-twitter">...</svg>
</a>

<!-- After: aria-label provides the name -->
<a href="https://twitter.com/mycompany" aria-label="Follow us on Twitter">
  <svg class="icon-twitter" aria-hidden="true">...</svg>
</a>

3. Add Alt Text to Image Links

When a link wraps an image, the image's alt text becomes the link name.

<!-- Before: image link without alt -->
<a href="/">
  <img src="/logo.svg">
</a>

<!-- After: alt text names the link -->
<a href="/">
  <img src="/logo.svg" alt="Acme Corp homepage">
</a>

4. Use Visually Hidden Text

When you need visible icons but want full text for screen readers.

<a href="/cart">
  <svg aria-hidden="true">...</svg>
  <span class="sr-only">Shopping cart (3 items)</span>
</a>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Framework Examples

<UButton
  to="/settings"
  icon="i-heroicons-cog-6-tooth"
  aria-label="Settings"
  variant="ghost"
/>

Verify the Fix

1. Re-run Lighthouse and confirm the audit passes
2. Tab through your page and listen with a screen reader
3. Check the Accessibility tab in DevTools shows a computed name
4. Verify each link name describes its destination, not just "click here" or "read more"

Common Mistakes

• Using "click here" or "read more" — These phrases mean nothing out of context; screen reader users often navigate by listing all links on a page
• Duplicating the URL as the link name — "https://example.com/products" is not a good link name; describe the destination
• Hiding text with display: none — This removes content from the accessibility tree; use the .sr-only pattern instead
• Adding aria-label to links that already have text — The aria-label overrides visible text, potentially confusing sighted screen reader users

Related Issues

Link name issues often appear alongside:

• Button Name — Same pattern for button elements
• Image Alt — Image links get their name from the image's alt text
• Crawlable Anchors — Links need both accessible names and valid hrefs

Test Your Entire Site

Anonymous icon links frequently appear in headers, footers, and social media sections across many pages. Unlighthouse audits every page of your site in one scan, identifying all links lacking discernible names so you can fix them systematically rather than hunting through templates manually.

Related

• All Accessibility Issues
• Accessibility Overview