html - WCAG 2.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

guidance from W3C指出您应该将图像和文本包装在单个 anchor 元素中。他们还声明您不得省略 alt 属性，因为这会导致 SC 1.1.1. 失败。

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

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.

https://www.w3.org/TR/wai-aria-1.2/#aria-hidden