WCAG 2.0 Redundant Links

Question

I've tried searching but can't seem to find a straight answer regarding redundant links and WCAG compliance.

I have a product collection/category page with a list of products. Each product has a product image, name, price, and Learn More button. The product image and Learn More button both go to the same destination.

<div class="product-wrap">
    <div class="product-image">
        <a href="product-page.html"><img src="product-image.jpg"></a>
    </div>
    <div class="product-name">
        Sample Product Name
    </div>
    <div class="product-price">
        $29.99
    </div>
    <div class="product-learn-more"
        <a href="product-page.html">Learn More</a>
    </div>
</div>

Based off what I've read having adjacent links go to the same location is not compliant.

I can't link the whole product since I don't want everything clickable so I'm not sure what my options are.

Does anything have any idea how to make this compliant?

Thanks!

Answer 1

Based off what I've read having adjacent links go to the same location is not compliant.

Strictly speaking, having redundant links is not a compliance failure. There is no WCAG success criteria dealing with redundant links. It's more of a UX decision whether to have them or not. If you can avoid them, great, but if not, it's not a big deal.

Answer 2

Get rid of the learn-more button. It serves no useful function when it simply duplicates the action of another link. It would be like having multiple buttons to post, send, reply, submit, etc. Pick just one.