Accessibility error - Empty link. A link contains no text. - Wordpress

Question

As you can check in the following link

https://benetialingerie.gr/product-category/%ce%ac%ce%bd%ce%b4%cf%81%ce%b5%cf%82/

there are some color attributes.

In the following link, you can check a report via webaim with some accessibility errors.

https://wave.webaim.org/report#/https://benetialingerie.gr/product-category/men/?lang=en

Just because all colors are buttons too, i want to insert somewhere an alt txt or something which, if i undestand right, point that it is a link. The error i got is:

Empty link A link contains no text.

Due to my limited developing skills, i don't know where exactly i must edit the code. I found something relavite, a plugin called "Variation Swatches for WooCommerce".

Can anyone help me out fixing this?

Many thanks in advance.

Nikos

Answer 1

Just add an aria-label to your link. It will not only make the WebAIM/WAVE report happy, it will also allow a screen reader to hear the color name when they navigate to the link.

<a aria-label="red" href="https://benetialingerie.gr/product-category/%ce%ac%ce%bd%ce%b4%cf%81%ce%b5%cf%82/?filter_color=%ce%ba%cf%8c%ce%ba%ce%ba%ce%b9%ce%bd%ce%bf" rel="nofollow" class="rtwpvs-term-span rtwpvs-term-span-color" style="background-color:#db100a;" role="link"></a>

Note that you have role="link" on the <a> . The default role of an <a> element is already a link so the role attribute is not needed.