The link does not contain text showing an error in the Wave Availability Tool
I have an HTML page that has
<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 the wave accessibility tool, it shows an error that the anchor tag does not contain text, although I use the <i> tag inside the <a> tag, but I can’t write anything inside the anchor tag.
According to the WAVE tool, both of the <a> elements you provided contain empty links that violate WCAG 2.0.4 Guidelines for Link Assignment (in Context) 2.4.4 .
From the WAVE tool:
" What does it mean? Link does not contain text.
Why is this important? If the link does not contain text, the function or purpose of the link will not be presented to the user. This can be confusing for keyboard and screen reader users.
How to fix it Delete a blank link or specify the text inside the link that describes the functionality and / or purpose of this link.
Algorithm ... in English The anchor element has the href attribute, but does not contain text (or just spaces) and images with alternative text. "
One easy way to correct the error - add an attribute aria-label to an element <a> :
<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 found the best option is to add a span tag with the "sr-only" class, which hides the tag from the average user, but allows screen readers to see it. (I think Bootstrap handles these situations.) Here is 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 does not contain any content. Yes, it contains element i , but its empty.
I assume you want to add an image via CSS. But this is not available. Non-CSS user agents or users who cannot perceive images will not be able to use this link.
Instead, use the img element with its alt attribute; this is the right element to include images that don't just decorate.
If you need to use CSS to include an image, you should at least provide some text in the a element (which can be visually hidden using CSS, if necessary). (And you should not use the i element for this purpose.)