How to Fix Links Without a Discernible Name
Lighthouse flags links that screen readers cannot identify. Learn how to add descriptive text to every link so users understand where it leads.
What Lighthouse Is Telling You
When Lighthouse flags “Links do not have a discernible name,” it means one or more <a> elements have no text that screen readers can announce. This is a weight-7 accessibility audit. Screen reader users navigating by links hear “link” with no description of where it goes.
Lighthouse checks for text content, aria-label, aria-labelledby, and alt text on contained images. If none exist, the link fails.
Why Links Are Missing Names
- Image-only links — A logo image wrapped in
<a>without alt text on the image - Icon links — Social media icons, arrow icons, or navigation icons with no text
- Empty links —
<a href="/page"></a>with no content, often used for clickable overlays - Generic text — While “click here” and “read more” technically pass the audit, they fail the spirit of accessibility
- Links styled with CSS — Links whose visible text comes from CSS
::before/::afterpseudo-elements
The Old Way to Fix It
- Run Lighthouse or a link accessibility audit
- For each flagged link, find it in the source code
- Determine where the link goes and what its purpose is
- Add descriptive text, aria-label, or alt text to the contained image
- For “read more” links, add
aria-labelwith context:aria-label="Read more about pricing" - Re-run the audit
The Frontman Way
Tell Frontman to fix your Lighthouse issues. That is the entire workflow.
Frontman has a built-in Lighthouse tool. It runs the audit, reads the failing scores, fixes the underlying code, and re-runs the audit to verify the score went up. If issues remain, it keeps going — iterating through fixes and re-checks until the metrics pass. Because Frontman sees each link in the rendered page, it understands the link’s destination and purpose — and writes accurate, descriptive labels. You say “fix the Lighthouse issues on this page” and Frontman handles the rest.
Key Fixes
- Use descriptive visible text —
<a href="/pricing">View pricing details</a>is better than<a href="/pricing">Click here</a> - Add alt text to image links —
<a href="/"><img src="logo.svg" alt="Homepage"></a> - Use
aria-labelfor icon links —<a href="https://twitter.com/..." aria-label="Follow us on Twitter"><TwitterIcon /></a> - Add context to generic links — For “Read more” links, use
aria-labelto add context:<a href="/blog/post" aria-label="Read more about performance optimization">Read more</a> - Use visually hidden text —
<a href="/search"><span class="sr-only">Search</span><SearchIcon /></a>provides an accessible name without changing the visual design - Never use empty href —
<a href="">or<a href="#">with no text is meaningless to all users
People Also Ask
What makes a link name “discernible”?
A discernible name is text that distinguishes one link from another and tells the user where it leads. “View pricing” is discernible. “Click here” is not — five “click here” links on a page are indistinguishable when navigated by keyboard or screen reader.
How is the link-name audit different from the button-name audit?
Links (<a>) navigate to URLs. Buttons (<button>) perform actions. They are tested by separate audits but the fix is the same: add text, aria-label, or aria-labelledby so the element has an accessible name.
Should I use title attributes on links?
The title attribute shows a tooltip on hover but is not reliably announced by screen readers and is invisible to touch users. Do not rely on title as the only accessible name. Use visible text or aria-label instead.
How do I handle links that open in a new tab?
Add visual and accessible indication: <a href="..." target="_blank" rel="noopener">External resource (opens in new tab)</a> or use an icon with aria-label. Users need to know the link will open a new window before they activate it.
You can use Frontman to automatically fix this and any other Lighthouse issue. Frontman runs the audit, reads the results, applies the fixes, and verifies the improvement — all inside the browser you are already working in. Get started with one install command.