Fix links without discernible names for better accessibility
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
- Open DevTools and run Lighthouse accessibility audit.
- Expand "Links do not have a discernible name."
- Click each flagged link to locate it in the DOM.
- Check the Elements panel for: inner text,
aria-label, or images with alt text. - Use the Accessibility tab in DevTools to see the computed accessible name.
Fix
1. Use descriptive link text
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>
2. Add aria-label for icon-only links
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>
3. Add alt text to image links
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
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"
/>
aria-label.SEO impact: link equity
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
- Re-run Lighthouse and confirm the audit passes.
- Tab through your page and listen with a screen reader.
- Check the Accessibility tab in DevTools shows a computed name.
- 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-onlypattern instead. - Adding aria-label to links that already have text: The
aria-labeloverrides visible text and confuses 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
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.
Form Labels
Learn how to fix missing form labels in Lighthouse accessibility audits. Labels ensure form controls are announced properly by assistive technologies.
Meta viewport
Fix 'zooming and scaling must not be disabled' Lighthouse audit. Remove user-scalable=no and maximum-scale=1 from your viewport meta tag.