WCAG 2.0 validation - "Consecutive text and image links to the same resource"

I am using tawdis online tool to validate WCAG 2.0 AA Level compatibility. I am facing an error "Consecutive text and image links to the same resource", when I use below code. How to fix this error in WCAG validation ?

<ul>
    <li><div><a href="#"><em class="fa fa-instagram" title="instagram"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-facebook-square" title="facebook"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-pinterest-square" title="pinterest"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-youtube-square" title="youtube"></em></a></div></li>
</ul>

Solution

This refers to the H2: Combining adjacent image and text links for the same resource technique of the WCAG.

As I suppose you have posted your full code, I guess that you use some sort of javascript for those links. And so the Tawdis parser thinks that those links target the same URI.

In reality, this is a bad analyze from that parser as it should have noted that the anchor # is often used to mark a javascript link (although it's not a valid URI and a bad practice).

You have different things to do:

use a meaningful tag for what appears to be a button, not a link,
do not use a tag like em which has a semantic meaning,
provide a text alternative.

Example:

 <ul>
    <li><button class="fa fa-instagram">Instagram</button></li>
    <li><button class="fa fa-facebook-square">Facebook</button></li>
    <li><button class="fa fa-pinterest-square">Pinterest</button></li>
    <li><button class="fa fa-youtube-square">Youtube</button></li>
</ul>