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?