WCAG2.0冗余链接

Question

我尝试过搜索，但似乎找不到一个关于冗余链接和WCAG遵从性的直接答案。

我有一个产品收藏/类别页面，其中有一个产品列表。每个产品都有一个产品形象，名称，价格，和‘学习更多’按钮。产品形象和“学习更多”按钮都去同一个目的地。

<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>

根据我所读到的，有相邻的链接到相同的位置是不符合的。

我不能连接整个产品，因为我不想所有的点击，所以我不知道我的选择是什么。

有什么东西知道如何使这个符合吗？

Answer 1

来自W3C的指导声明您应该将图像和文本包装在一个锚元素中。它们还指出，您不能忽略alt属性，因为这会导致SC 1.1.1.失败。

如果在您的实例中这不是一个选项，那么想到的一个可能的解决方案就是在您的aria-hidden上使用div.product-image属性。

作者可以谨慎地使用aria-隐藏，以隐藏明显呈现的内容对辅助技术，只有当隐藏这些内容的行为是为了改善用户的经验辅助技术，删除多余或无关的内容。 https://www.w3.org/TR/wai-aria-1.2/#aria-hidden