"Links do not have a discernible name" error in Lighthouse

During the process of checking your website with tools like Lighthouse or PageSpeed Insights, you may get the warning "Links do not have a discernible name". In this article, we will learn about these errors and how to fix them to enhance the user experience and improve the website's score on performance measurement tools.

What is the "Links do not have a discernible name" error?

The "Links do not have a discernible name" error is one of the most common errors reported in performance measurement tools like Lighthouse and PageSpeed Insights. It usually appears when a link has no text content or contains only insignificant characters like "click here".

An error related to Accessibility (user experience, accessibility) in Lighthouse / PageSpeed ​​Insights.

In this case the error is caused by the absence of the image alt (alternative text). The purpose is that when the image, button, icon fails to load, the alternative text will be displayed.

How to fix

To fix the "Links do not have a discernible name" error, you need to make sure that each link on your site has clear text content and accurately describes what the link is about. Here are a few ways to fix this:

1. Name the link after its content: Use words or phrases that accurately describe the content of the link to name the link. For example, "Read more about product X" instead of "Click here to read more".
2. Use the "title" and "aria-label" attributes: Use these attributes to provide more information about the link's content to users when they hover over the link without clicking.
   For example: <a href="#" title="Đọc thêm về sản phẩm X">Đọc thêm</a>.
3. If you use images or icons to create links, make sure they have the "alt" and "aria-label" attributes to inform users about the content of the link.

Mình sử dụng Wordpress nên chỉ cần vào "media" -> "edit" -> fill "Alternative Text" is to be.

<img alt='alt image'>
<a aria-label='aria label icon'></a>
<button aria-label="aria label button"></button>

See more at: Labels and text alternatives.

Conclude

The error "Links do not have a discernible name" can affect the user experience and cause a decrease in a website's score on performance measurement tools. However, it can easily be fixed by naming the links according to their content or using the "title" and "aria-label" attributes to provide more information to the user. Through this article, hope you have a clear understanding of the "Links do not have a discernible name" error and how to fix them.