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指出您应将图像和文本包装在单个锚元素中。他们还声明您不得忽略alt属性，因为这会导致SC 1.1.1.

失败

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

作者只有在隐藏隐藏内容的目的是通过删除多余或无关的内容来改善辅助技术用户的体验时，才可以谨慎地使用aria-hidden隐藏可见的渲染内容。 >
https://www.w3.org/TR/wai-aria-1.2/#aria-hidden

WCAG 2.0冗余链接

1 个答案: