0
229
ViewsHow to fix Lighthouse "Links do not have a discernible name"
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?
3 answers
Answer question0
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>
0
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>
0
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
