Lighthouse suggesting to fix my a href text
I have a html like that
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?
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
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>
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
Related
Lighthouse suggesting to fix my a href text
I have a html like that
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?
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
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>
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
Not sure if using a div class is the best way to go about this. I am trying to have the URL load when the facebook icon is clicked.
<div class="social facebook">
</div>
Without wrapping a URL into an "a" tag, you can do it like this;
<i class="fab fa-facebook-f" onclick="location.href = 'https://www.facebook.com/'"></i>
Using an "a" tag you can use this;
<i class="fab fa-facebook-f"></i>
Note: here I use font awesome icon tag "i"
I would like to add the name base on the attribute title as there is no text displayed for the link but instead a icon using font-awesome
My link are like this :
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
</a>
I need solution without javascript involve
Like this:
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
<meta itemprop="name" content="Whatever Name You Want" />
</a>
(Note edited to remove incorrect alternative after below discussion).
Though as an aside, as per below conversaation, some question on whether <i> tag should even be used: Should I use <i> tag for icons instead of <span>?
I have the following code:
<i class="fa fa-chevron-left"></i>
but when I add an id and onclick attribute like so:
<i class="fa fa-chevron-left" id="back" onclick="backNews();"></i>
the icon disappears. Can anyone see the problem?
The icon re-appears if I remove the attributes
I have also tried to remove the <i> and replace it with a <span> tag, but no luck.
Any suggestions are welcome
Please check if your site's css by accident applies css rules for #back. Does it happen also if you use only id="back" or onclick="backNews();"? Does it happen if you change id like this
id="backNow"
?
I have a font awesome icon <i> item inside a a href with a target='_blank' — yet only the text is clickable; clicking on the icon opens a new tab with about:blank, not the actual link.
<a href="..." class="not-light" target="_blank" style="display: block; ">
<i class="fa fa-android"></i> »
</a>
How do I make the icon clickable as well?
For example, click the lightbulb in the footer of the http://ambieye.com/ site's footer.
The <li> is a list. The list must be on the outer and the text in the inner like this :
<li style="display: block; ">
<a href="..." class="not-light" target="_blank">
<i class="fa fa-android"></i> » The text
</a>
</li>
Try it.
The issue was in the javascript handler, not the css/html; the way to find these issues is in Chrome's handlers section, under 'click handler' -
function handleSystemLink(a) {
var url = a.target.href;
The argument a was the i element which did not have href, thus openning a bad link.