Fixing Error Links Don't Have a Discernible Name on
Lighthouse - Links don't have a discernible name is an error that often occurs
when we check blogs with Lighthouse that must be fixed for links that must have
visible text.
The error occurs when we create a link by using an image
or icon to change the anchor text. For example, for example, we create social
media links using icons.
Text links or links with images must be visible to the
reader and must be able to focus. The inaccessible link element creates
accessibility barriers, because the link is a fundamental component of a
website.
Users who only use the keyboard and without a mouse to navigate
web pages can only click on the link that can receive focus. Links that cannot
receive focus will not be accessible to this user.
Here
is an example of an error link on Lighthouse:
<a href="#"><i class="fa fa-search"></i></a>
Or
<a href="#"><img alt="" height="20" src="search.png" width="20" /></a>
The example link above if checked with Lighthouse will
cause an error link do not have a discernible name .
To
fix this, please add the aria-label code to
the link as shown below.
<a aria-label="Search" href="#" title="Search"><i class="fa fa-search"></i></a>
And don't forget to add a title tag to every link for
SEO. After all the error links have been corrected, please
check again with Lighthouse.
May be useful..........