Screen reader users navigate sites by tabbing through links. A link without a name is useless. It is announced as "link" and users must guess where it goes.

What's happening

Lighthouse flags anchor elements (<a>) that have no accessible name. This happens when links contain only images without alt text, CSS background images, or empty content. The audit checks for text content, aria-label, aria-labelledby, or alt text on child images. Without these, users must guess the destination.

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

Use 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>

Use aria-label for icon-only links.

<!-- 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>

The image's alt text becomes the link name when a link wraps an image.

<!-- 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

Use visually hidden text for icons that need a name.

<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

Nuxt UI's UButton component with to prop handles accessibility when you provide a label. For icon-only buttons that act as links:
<UButton
  to="/settings"
  icon="i-heroicons-cog-6-tooth"
  aria-label="Settings"
  variant="ghost"
/>
For navigation links, always provide visible text or an explicit aria-label.

Descriptive link names are essential for Internal SEO.

When you link to a page, the "anchor text" tells Google what the destination page is about. This passes a "Relevance Signal."

  • "Click here": Tells Google the target page is about "Click here". This is useless.
  • "Read our accessibility guide": Tells Google the target page ranks for "Accessibility guide". This is high value.

Fixing "Link name" errors optimizes your site's internal linking structure and helps important pages rank for their target keywords.

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. Never use "click here" or "read more."

Common mistakes

  • Using "click here" or "read more": These phrases mean nothing out of context. Screen reader users navigate by listing all links on a page.
  • Duplicating the URL as the link name: "https://example.com/products" is a poor 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 and confuses sighted screen reader users.

Link name issues often appear alongside:

Test your entire site

Icon links appear in headers, footers, and social media sections. Unlighthouse audits every page of your site in one scan to identify all links lacking discernible names.