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

html css lighthouse
sreginogemoh picture sreginogemoh · Aug 4, 2018 · Viewed 37.9k times · Source

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?

Answer

Binyamin picture Binyamin · Aug 6, 2018

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>

Related questions

Preloading Google Fonts

Light House audit is suggesting that I preload key requests, specifically the two google fonts that I'm using in my React app. A Light House member suggested using: <link rel="preload" as="style" href="https://fonts.googleapis.com/css?…

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More