Link contain no text showing error in Wave accessibility evaluation tool

Question

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.

Answer 1

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>