If You have (Links do not have a discernible name)

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:







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



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>

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>

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" />
Was this answer helpful?

Related Articles

If you have (Background and foreground colors do not have a sufficient contrast ratio.)

Text that has a low contrast ratio—that is, text whose brightness is too close to the background...

If you have (Lists do not contain only <li> elements and script supporting elements (<script> and <template>).)

Screen readers and other assistive technologies depend on lists being structured properly to keep...

If you have ( robots.txt is not validLighthouse was unable to download a robots.txt file)

The robots.txt file tells search engines which of your site's pages they can crawl. An invalid...

Powered by WHMCompleteSolution