0

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!

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.

0

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.

  • I would argue that it provides a call to action that otherwise wouldn't be on the product blocks, as well as gives a clear way to see more details to anyone that is unfamiliar with the idea that the image is likely to be clickable. – DasBeasto Jun 17 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.