Links do not have a discernible name

Link text that is discernible, unique, and focusable improves the navigation experience for users of screen readers and other assistive technologies.

How this Lighthouse audit fails #

Lighthouse flags links that don't have discernible names:

Slove 

How to Create a Discernible Name for Icon and Image Links?

learn how to add an accessible name for links with non-text or empty content

Add Discernible Name to Links With No Content

For links that have no content (i.e. they're empty; for example the link might styled as a shape, icon, etc. for screen media), you can add the link description using the aria-label attribute. Consider, for example, the following:

<a href="https://twitter.com/designcise" aria-label="Twitter"></a>

Add Discernible Name to Links With Icons or Other Non-Textual Content

For non-textual content, such as the i tag (for adding icons), span, or any other tag without text content, adding the aria-label attribute to the link should be enough to make the it accessible. For example:

<a href="https://twitter.com/designcise" aria-label="Twitter">
    <i class="icon icon-twitter"></i>
</a>

Add Discernible Name to Links With Images

For a link containing only an image, adding the alt attribute to the img tag should be sufficient as the alt attribute becomes the accessible name in such a case. For example:

<a href="https://twitter.com/designcise">
    <img src="img/twitter.png" alt="Twitter" />
</a>