Рекомендуемая практика Приоритет: Незначительно
Описание изображения повторяет текст рядом
Альтернативный текст изображения совпадает с видимым текстом рядом, например фото товара с alt-текстом «Синяя льняная рубашка» в ссылке, где тоже написано «Синяя льняная рубашка». Это рекомендуемая практика, а не требование WCAG уровня AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи программ чтения с экрана слышат одни и те же слова дважды, а на странице категории это повторяется на каждой карточке товара. Просмотр становится медленнее и утомительнее, хотя никакая информация не теряется.
Кого это касается
- пользователи программ чтения с экрана
- незрячие люди
- пользователи брайлевских дисплеев
Как исправить
Если изображение ничего не добавляет к тексту рядом, задайте ему пустой alt (alt=""), чтобы программы чтения с экрана его пропускали. Если оно показывает что-то полезное, напишите alt-текст, описывающий отличие, например цвет или ракурс, вместо повторения названия товара. Видимый текст оставьте без изменений.
В Shopify
Часто встречается в карточках товаров, где тема использует название товара как alt изображения рядом со ссылкой-названием. Измените сниппет карточки в Liquid, чтобы alt был пустым, когда название рядом, или напишите отдельные alt-тексты для медиа товара в админке.
В Shoptet (CZ)
Alt-текст изображений товаров обычно берётся из названия товара или описания изображения. Заполните отдельные описания изображений в настройках товара; по поведению шаблона обратитесь в Shoptet или к партнёру.
В PrestaShop
Изображения товаров в списках часто автоматически получают название товара как alt-текст. Измените подписи изображений на странице товара или шаблон миниатюры товара в теме.
В WooCommerce
Часто бывает, когда изображения товаров в списках магазина получают название товара как alt-текст. Измените alt-текст в медиабиблиотеке или шаблон списка в дочерней теме.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core image-redundant-alt.
dequeuniversity.com, github.com, www.w3.org