Требование WCAG A/AA Приоритет: Серьёзно
У изображений нет текстового описания
У некоторых изображений нет альтернативного текста, поэтому люди, которые их не видят, не получают никакой информации о том, что на них.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров слышат тишину или имя файла вроде «IMG_2041.jpg» вместо товара, цвета или предложения. Они могут упустить важные детали и уйти в магазин, где товары описаны.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
- люди с отключёнными картинками или медленным интернетом
Как исправить
Добавьте атрибут alt к каждому <img>. Коротко опишите то, что важно для покупки (товар, цвет, ключевая деталь). Для чисто декоративных изображений ставьте alt="", чтобы их пропускали. Не пишите «изображение…» и не набивайте ключевые слова.
В Shopify
Добавьте alt-текст к медиа товаров и изображениям в секциях темы в админке Shopify. Если alt-текст есть, но не выводится, обычно в Liquid-шаблоне темы у тега изображения нет атрибута alt.
В Shoptet (CZ)
Добавьте описания к изображениям товаров и баннеров в админке, если шаблон это позволяет. Если шаблон их не выводит, обычно нужна доработка шаблона через Shoptet или партнёра.
В PrestaShop
Изображения товаров обычно берут alt из подписи изображения или названия товара в бэк-офисе. Проверьте, что шаблоны .tpl темы выводят атрибут alt, в том числе в модулях вроде слайдеров.
В WooCommerce
Заполните поле «Атрибут alt» в медиатеке WordPress и проверьте, что тема или конструктор страниц его выводит. У изображений из плагинов и слайдеров могут быть свои настройки alt.
Стандарты
| Стандарт | Пункт |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Автоматическая проверка: правило axe-core image-alt.
dequeuniversity.com, github.com, www.w3.org
Похожие проверки
-
На странице устаревшая разметка мигающего текста
WCAG 2.2.2 A
-
Текст трудно читать из-за низкого контраста
WCAG 1.4.3 AA
-
Некоторые подписи указывают не на тот элемент
WCAG 4.1.2 A
-
У атрибутов доступности неверные значения
WCAG 4.1.2 A