Ссылки с одинаковым текстом ведут в разные места

Несколько ссылок на странице имеют одинаковый текст, например «Подробнее» или «Купить сейчас», но ведут на разные страницы. Это рекомендация уровня AAA стандарта WCAG, выше уровня AA, на который опирается закон.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Пользователи программ чтения с экрана часто просматривают список всех ссылок страницы. Список одинаковых «Подробнее» ничего им не говорит, и приходится открывать каждую ссылку, чтобы найти нужный товар или статью. Это замедляет, но редко срывает покупку.

Кого это касается

пользователи программ чтения с экрана
люди с когнитивными нарушениями
пользователи голосового управления

Как исправить

Дайте каждой ссылке текст, который описывает, куда она ведет, например «Подробнее о доставке» вместо «Подробнее». Если видимый текст должен оставаться коротким, добавьте детали скрытым текстом или aria-label, который начинается с видимых слов. Ссылки, которые действительно ведут на одну страницу, например фото товара и его название, могут иметь одинаковое имя.

В Shopify

Обычно это кнопки «Подробнее» или «Купить» в секциях блога, коллекций или баннеров. Измените подписи кнопок отдельно для каждой секции в редакторе темы или добавьте название статьи или товара к ссылке в коде Liquid секции.

В Shoptet (CZ)

Обычно это баннеры или списки статей с одинаковым текстом кнопок. Измените тексты там, где это позволяют настройки шаблона; иначе добавьте детали через собственный код или обратитесь к Shoptet или партнеру.

В PrestaShop

Обычно это ссылки «Быстрый просмотр», «Больше» или «Подробнее» в списках товаров и модулях блога. Измените текст ссылки или добавьте название товара скрытым текстом в шаблонах .tpl темы.

В WooCommerce

Обычно это ссылки «Подробнее» в списках блога или кнопки в сетках товаров. WooCommerce обычно добавляет название товара к своим кнопкам корзины, но кнопки темы или конструктора страниц могут этого не делать. Измените подписи в конструкторе или в шаблоне дочерней темы.

Стандарты

Стандарты
Стандарт	Пункт
WCAG 2.2	2.4.9 (AAA) Link Purpose (Link Only)
WCAG 2.1	2.4.9 (AAA) Link Purpose (Link Only)
WCAG 2.0	2.4.9 (AAA) Link Purpose (Link Only)

Автоматическая проверка: правило axe-core identical-links-same-purpose. dequeuniversity.com, github.com, www.w3.org

Все правила, которые мы проверяем