I have an HTML page in which there is
<a href="example.com"><i class="myclass"></i></a>
<a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a>
but from wave accessibility tool it's showing an error that the anchor tag contains no text, although I am using <i> tag inside the <a> tag, but I cannot write anything inside anchor tag.
According to the WAVE tool the two <a> elements you provided both contain Empty Links which violate WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)".
From the WAVE tool:
"What It Means A link contains no text.
Why It Matters If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
How to Fix It Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
The Algorithm... in English An anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text."
One easy way to fix the error is to add an aria-label attribute to the <a> element:
<a href="https://example.com" aria-label="first link"><i class="myclass"></i></a>
<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>
What I have found to be the best option is to add a span tag with a class named "sr-only" that hides the tag from a regular user, but allows screen readers to see it. (I think it is how Bootstrap manages these situations.) Here's an example:
<a href="example.com">
<i class="myclass"></i>
<span class="sr-only">Visit example.com</span>
</a>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
As you noticed, your link doesn’t contain any content. Yes, it contains an i element, but it’s empty.
I assume you want to add an image via CSS. But this is not accessible. User agents without CSS support, or users that can’t perceive images, won’t be able to use this link.
You should use an img element with its alt attribute instead; this is the correct element for including images that are not merely decoration.
If you have to use CSS for including the image, you should at least provide some text in the a element (which could be visually hidden via CSS, if must be). (And you should not use the i element for this purpose.)
