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

Question

Lighthouse suggesting to fix my a href text

I have a html like that

<a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

What is really happens here is I just displaying the image inside a href by using css class:

.social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

I can't do <a....>Twitter</a> as in that case the displayed text will destroy the view.

I can't think of anything else like just putting a span with a text inside my a and make it hidden e.g <a....><span class="hide">Twitter</span></a> but wonder if there is any proper solution?

Any recommendations on that?

score 231 · Answer 1 · answered Aug 06 '18 at 20:58

231

For accessibility reasons (required for screen readers) links must contain a text or have description in aria-label attribute. In many use cases like yours you don't want to add any text in a link, but instead use as image or any graphic element wrapper.

Fix it by adding aria-label="Twitter" to your a element, like

<a href="https://twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

answered Aug 06 '18 at 20:58

Binyamin

7,493
10
60
82

1

Can we make it spaced? e.g. "Find us on twitter? – localhost Dec 03 '18 at 12:57
1

@Nofel, yes, of course. Define whatever value for `aria-label`. – Binyamin Dec 03 '18 at 19:54

score 18 · Answer 2 · answered Oct 06 '18 at 04:41

If want to implement this in react app then, We need to add aria-label property to <a> tag.

Before:

<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

After:

<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

hrushikesh thule · Answer 3 · 2021-05-25T08:10:41.477

4

For SlickNav The solution is quite simple. Just add title to the element of the Javascript file which has aria-haspopup="true" and tabindex="0" attribute. Add title like title="Anything" in above-mentioned line. It will solve the problem. Working example is Oceanspace

For other similar issues you have to add title attribute to the respective anchor element

edited May 25 '21 at 08:10

answered May 20 '21 at 14:20

hrushikesh thule

111
1
4

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

3 Answers3