How to Fix “Links Do Not Have a Discernible Name” Error with ChatGPT

Links Do Not Have a Discernible Name - Intro

Are you struggling with the Lighthouse error "Links Do Not Have a Discernible Name" in Google PageSpeed Insights? Improving website speed and accessibility is one of the most important steps to rank higher on Google and provide a better user experience. If you’ve ever tested your site using Google PageSpeed Insights or Lighthouse, you may have seen the warning:

👉 "Links do not have a discernible name".

If you’ve recently checked your website speed on Google PageSpeed Insights and noticed the error “Links Do Not Have A Discernible Name,” you’re not alone. This common accessibility issue can lower your website score and affect overall user experience. But don’t worry — I have a simple, effective solution that works across platforms like Blogger (Blogspot), WordPress, Shopify, and more.

This error means your website has anchor (<a>) tags that don't provide enough context for screen readers, crawlers, and sometimes even for users. The good news? It's super easy to fix, and in this tutorial, I'll show you exactly how - with a real-life case study from my own website (NextGen Digital).

Links Do Not Have a Discernible Name...

In this tutorial, I’ll show you how to fix this lighthouse error step-by-step using the aria-label attribute technique. Plus, I’ll share my personal case study showing how this simple fix boosted my website speed score from 96 to a perfect 100!

In this guide, I'll show you:

• What this error means.
• Why it happens.
• How I fixed it on my own website (NextGen Digital).
• The exact step-by-step solution you can follow.
• Case study results (before vs. after).

By the end, you'll be able to solve this issue and boost your Lighthouse accessibility score, SEO, and user experience.

What Does "Links Do Not Have a Discernible Name" Mean?

Google’s Lighthouse tool flags links that don’t have descriptive names or accessible labels. Screen readers and accessibility tools rely on these names to help users understand where a link will take them. If links are missing descriptive text or labels, it triggers this warning and can reduce your website’s SEO and usability score.

When Lighthouse detects a link without proper labeling, it's usually because:

• The <a> tag has no text inside it.
• The link only contains an image without an alt attribute.
• The link is being used for icons (social media, menus, buttons) without descriptive text.

This makes the link inaccessible for users with screen readers and may cause Technical SEO issues, since search engines don't know the purpose of the link.

Why Fix This Error?

• Accessibility - Screen readers need labels to guide visually impaired users.
• SEO - Search engines give better rankings to websites with proper semantic structure.
• User Experience - Hovering over links should give context.
• Performance Scores - Solving it improves Lighthouse/PageSpeed Insights scores.

My Case Study: Fixing It on NextGen Digital

When I tested my website on PageSpeed Insights, I had a score of 96.The only accessibility issue was:

"Links do not have a discernible name."

After research, I found the fix: Add an aria-label attribute to the <a> tag.

Here's how I solved it:

Example Before Fix:

html

CopyEdit

<a href="https://facebook.com/nextgendigitalinf"> <i class="fab fa-facebook"></i> </a>

Lighthouse flagged this as an error because the link only contained an icon.

Example After Fix:

html

CopyEdit

<a href="https://facebook.com/nextgendigitalinf" aria-label="Visit NextGen Digital on Facebook"> <i class="fab fa-facebook"></i> </a>

Now the link has a discernible name for both search engines and screen readers.

Case Study Result:

• Before: Lighthouse score = 96
• After: Lighthouse score = 100 🎉

My site speed and accessibility are now perfectly optimized.

Step-by-Step Guide: How to Fix It on Your Website

Follow these steps to solve the issue:

Step 1: Identify the Links

Run your site through Google PageSpeed Insights or Lighthouse.Find which links are missing discernible names (usually social icons, buttons, or image links).

Step 2: Add aria-label Attribute

Edit your website theme files (or HTML) and add a descriptive label.

Example:

html

CopyEdit

<a href="https://twitter.com/nextgendigital" aria-label="Visit NextGen Digital on Twitter"> <i class="fab fa-twitter"></i> </a>

Step 3: Use Descriptive Labels

Good examples of aria-label:

• "Go to homepage"
• "Read more about SEO tutorials"
• "Visit NextGen Digital on LinkedIn"

Avoid generic labels like "Click here" or "Link".

Step 4: Re-Test on Lighthouse

After saving changes, run PageSpeed Insights again.If done correctly, the error will disappear.Your score will improve (up to 100).

Pro Tips for Beginners

• Always use aria-label for icon-only links.
• For text links, you don't need aria-label unless the text is unclear.
• If a link wraps an image, add alt text or an aria-label.

Example:

html

CopyEdit

<a href="https://nextgendigitalinfo.blogspot.com" aria-label="NextGen Digital Homepage"> <img src="logo.png" alt="NextGen Digital Logo"> </a>

FAQs - Links Do Not Have a Discernible Name

This FAQ explains the Lighthouse/accessibility issue “Links do not have a discernible name,” what a discernible (accessible) name is, why links or buttons sometimes fail the check, and how to fix them. It covers the common causes (icon-only links, empty anchors, images without alt text, misuse of ARIA), gives concrete code examples you can paste into your theme, and a short testing checklist so you can verify the fix with Lighthouse and screen readers.

What is a discernible text?

A discernible text (also called an accessible name) is the text or label that assistive technology (screen readers) reads to describe a link or button. The accessible name can come from:

• The element's visible text (preferred).
• An image's alt attribute when the image is the link content.
• An aria-label attribute on the element.
• An aria-labelledby that points to another element containing the label.
• In some cases, the title attribute, but it's unreliable and should not be the primary label.

Why it matters:

• Screen reader users rely on it to understand where a link or button goes or what action it performs.
• Lighthouse and accessibility audits flag missing accessible names - lowering your accessibility score.

✔ Examples of discernible text:

• ✅ <a href="/contact">Contact Us</a>
• ✅ <button>Submit Form</button>

❌ Non-discernible examples:

• <a href="/contact"></a> (empty link)
• <button><i class="icon"></i></button> (icon-only with no label)

Why do my links not have a discernible name?

Common causes (quick list):

• The link contains only an icon or SVG and no accessible text or aria-label.
• The link contains an <img> without a meaningful alt attribute (or alt="" when it shouldn't be empty).
• The link's text is visually hidden incorrectly (or hidden with display:none), so assistive tech can't see it.
• You used aria-hidden="true" on the label or on the element that would provide the name.
• The link is empty (<a href="#"></a>) or has no href and no label.
• Wrong use of role + missing name (e.g., element with role="link" but no accessible name).
• Over-reliance on title attribute which some screen readers ignore or show inconsistently.

How to fix "Buttons must have discernible text"?

Buttons need visible or accessible text to describe their purpose. If buttons show this error, they are missing accessible labels. You can fix it by:

✅ Best Practices:

1. Add direct text:

<button>Subscribe</button>

1. Add aria-label if using icons:

<button aria-label="Search"> <i class="fa fa-search"></i> </button>

1. Use title attribute as backup:

<button title="Play Video"> <i class="fa fa-play"></i> </button>

What is "Links must have discernible text"?

"Links must have discernible text" is an accessibility guideline that ensures every link communicates its purpose. This benefits:

• Screen reader users
• People with visual impairments
• SEO (since search engines also use link text to understand context)

Essentially, it means every <a> element must have descriptive text, alt text, or ARIA labels so users know where the link leads.

In short: Links should say what they do.

✔ Example:

<a href="/services" aria-label="View Services"> <i class="fa fa-cogs"></i> </a>

How to fix Lighthouse "Links do not have a discernible name"?

To fix this error, you should:

✅ Fix Options:

1. Add meaningful text inside the link:

<a href="/about">About Us</a>

1. Use aria-label for icon-only links:

<a href="/search" aria-label="Search"> <i class="fa fa-search"></i> </a>

1. Use title attribute (not the best, but acceptable):

<a href="/home" title="Home"> <i class="fa fa-home"></i> </a>

1. Ensure dynamic links render accessible text.

✅ Pro Tip: Always prefer visible text when possible, since it improves both accessibility and SEO. Use aria-label or title only for icons or non-textual links.

Do you have any more questions about website accessibility, SEO, or fixing Lighthouse errors? Feel free to share them here, and I’ll guide you step by step.

More Article for you from NextGen Digital:-

Links Do Not Have a Discernible Name - Video Tutorial

I’ve recorded a complete walkthrough on how I fixed Links Do Not Have a Discernible Name error for my website. You can watch it on my YouTube channel:@NextGenDigital.

Final Thoughts on Links Do Not Have a Discernible Name

Fixing the “Links Do Not Have A Discernible Name” error is easier than it seems and can give you an immediate boost in Google PageSpeed Insights scores. By adding descriptive aria-label attributes to your <a> tags, you improve accessibility and SEO at the same time.

Fixing the "Links Do Not Have a Discernible Name" error is a quick win for both SEO and accessibility.

• It only takes a few minutes to add aria-label attributes.
• It improves Google Lighthouse scores instantly.
• It ensures better user experience for everyone.

I applied this fix on NextGen Digital and went from 96 to 100 on PageSpeed Insights. 🚀

Ready to boost your website speed? Start adding those aria-labels now and unlock your site’s full potential!

If you found this tutorial helpful, feel free to share it with others or leave a comment below.