Альтернативный текст заменяет изображение в ситуациях, когда его нельзя увидеть: для покупателя, использующего программу экранного доступа, при медленном соединении, когда картинки не загружаются, и для поисковой системы, индексирующей страницу. В интернет-магазине для него предусмотрено отдельное поле у каждого изображения товара.
Полезный альтернативный текст простым предложением описывает изображение: товар, его цвет и материал, а также ракурс — например, тёмно-синее шерстяное пальто спереди на модели. Он не повторяет дословно название товара и не представляет собой список ключевых слов.
Для каждого изображения галереи нужно своё описание, поскольку вид спереди, сзади и крупный план манжеты показывают разное. На маркетплейсах это поле часто отсутствует, и его роль выполняют название и характеристики; в собственном магазине продавец пишет альтернативный текст самостоятельно.
Где хранится альтернативный текст
Альтернативный текст — это атрибут элемента изображения в HTML-страницы, а не часть файла изображения. В системе магазина его можно ввести в поле рядом с каждым фото в редакторе товара или медиатеке. Поскольку он относится к странице, он не передаётся вместе с файлом, когда изображение скачивают, отправляют на маркетплейс или используют на другом сайте.
Что происходит, когда поле пустое, зависит от системы. Некоторые темы магазина подставляют название товара; другие не добавляют атрибут, и программа чтения с экрана может вслух прочитать имя файла. Ни один из вариантов не сообщает покупателю, что именно показано на этом изображении.
Что писать для каждого вида изображения
Формулировка зависит от ракурса. Для снимка на модели текст описывает, как надето изделие и где оно заканчивается на теле; внешность модели не упоминают, если она не важна для товара. Для крупного плана называют деталь — например латунную молнию на манжете. Для цветового варианта указывают его цвет, поскольку именно эту информацию нужно сообщить покупателю, который не видит изображения.
Для изображений с текстом одного альтернативного описания недостаточно. Таблицу размеров или инструкцию по уходу, сохранённую как изображение, программа чтения с экрана прочитать не может; длинная таблица, озвученная одним предложением, тоже никому не поможет. Такой материал размещают на странице как настоящий текст, а в кратком альтернативном описании указывают, что представляет собой изображение.
Типичные ошибки и способы их обнаружить
Частые ошибки носят технический характер. Всем изображениям галереи присвоен один и тот же текст; вместо описания осталось имя файла камеры; изображение заменили, а прежнее описание сохранили; магазин перевели, но альтернативные тексты оставили прежними.
Альтернативный текст не показывается на странице, поэтому его нужно проверять отдельно. Встроенная в телефон или компьютер программа чтения с экрана произносит его вслух, а режим разработчика в браузере показывает атрибут. Небольшая подпись, появляющаяся при наведении указателя на изображение, относится к другому полю — атрибуту title — и ничего не говорит об alt-тексте.
Альтернативный текст и связанные понятия
- Товарный фид
- Товарный фид передаёт данные о товарах маркетплейсам и сайтам сравнения цен, указывая для каждого изображения веб-адрес. Альтернативный текст относится к странице магазина, и в фиде обычно нет отдельного поля для него; товар там описывают заголовок и атрибуты.
- Текст на изображениях товара
- Текст на изображении товара — это надпись внутри самой картинки, которую программа чтения с экрана не может прочитать. Альтернативный текст расположен за пределами картинки и может быть озвучен, поэтому важные слова указывают в нём и на странице.
- Метаданные IPTC
- Метаданные IPTC хранятся внутри файла изображения и перемещаются вместе с ним, а альтернативный текст хранится на странице. В стандарте IPTC есть поле для описания доступности, но веб-страница использует его только в том случае, если система магазина копирует его в атрибут alt.
- Миниатюра
- Миниатюра — уменьшенная версия изображения в списках и корзинах. Если миниатюра сама служит ссылкой на товар, программа чтения с экрана произносит её альтернативный текст как название ссылки; пустой текст оставляет ссылку без названия.
Проверка альтернативного текста фотографий товаров
- Для каждого изображения товара на странице задан альтернативный текст; нигде не отображается имя файла или текст по умолчанию из системы магазина.
- У изображений одной галереи разные описания, каждое из которых называет именно свой ракурс или деталь.
- В тексте указан цвет показанного варианта, а не другого варианта.
- Надписи внутри изображений, например таблица размеров, также доступны как настоящий текст на странице.
- Альтернативный текст написан на языке страницы, в том числе на переведённых версиях магазина.