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

Руководство от W3C гласит, что вы должны обернуть изображение и текст в один элемент привязки.Они также заявляют, что вы не должны пропускать атрибут alt, так как это может привести к сбою SC 1.1.1.

Если это не вариант в вашем случае, один из возможныхРешение, которое приходит на ум, заключается в использовании атрибута aria-hidden на вашем div.product-image.

Авторы МОГУТ с осторожностью использовать aria-hidden, чтобы скрыть визуально визуализированный контент отВспомогательные технологии, только если действие по сокрытию этого контента предназначено для улучшения работы пользователей вспомогательных технологий путем удаления избыточного или постороннего контента.

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