Дизайн — статьи о сайтах
В интернет-магазине одежды фотография часто несёт больше информации, чем текст: по ней оценивают цвет, фактуру, длину и посадку. Если посетитель пользуется экранным диктором, отключил картинки или открыл страницу при плохой связи, вместо фото он получает только alt-описание. Ниже разберём, как его писать и как встроить в работу с каталогом.
Что должен передавать alt у фото товара
Alt заменяет изображение там, где его не видно, поэтому описывать нужно то, ради чего фото стоит на странице. Если длина рукава и состав уже указаны в тексте рядом, повторять их не нужно. Если же о цвете, фактуре или детали сказано только на фото, это нужно передать в alt или добавить в текст карточки.
Рабочая схема: вещь, цвет, ракурс или деталь, а на фото с моделью ещё и то, как вещь сидит. Не начинайте с «Фото» или «Картинка»: диктор и так сообщает, что это изображение. Не перечисляйте поисковые фразы: такая подпись мешает слушателю и не помогает понять товар. Ориентир по длине — одна короткая фраза.
Условный пример: карточка льняной рубашки
Допустим, на странице есть заголовок «Рубашка льняная», выбор цвета (песочный, графит) и четыре изображения. Подписи могут быть такими:
- Главное фото: «Льняная рубашка песочного цвета, вид спереди, застёгнута на все пуговицы».
- Фото на модели: «Песочная рубашка навыпуск, рукава закатаны до локтя».
- Деталь: «Манжета с двойной строчкой и перламутровой пуговицей, крупный план».
- Вид сзади: «Рубашка песочного цвета, вид сзади, на спине вытачка по центру».
Все четыре подписи разные. Если у каждого фото одинаковое «Рубашка льняная», слушатель четыре раза услышит одно и то же и не узнает ничего нового.
Цвета, размеры, баннеры: где чаще всего ошибаются
- Образцы цвета. Кружок или квадрат с цветом должен иметь название: «Графит», «Песочный». Выбранный вариант стоит обозначить и текстом, а не только рамкой вокруг образца.
- Таблица размеров. Если это картинка, цифры из неё недоступны слушателю. Лучше сделать обычную HTML-таблицу, а если остаётся картинка, продублировать значения текстом.
- Баннеры с текстом. Если надпись «Новая коллекция» вшита в картинку, alt должен повторять её и указывать, куда ведёт ссылка. Лучше выводить надпись живым текстом поверх фона.
- Декоративные элементы. Фоновые узоры, разделители и дублирующие значки получают пустой alt (alt=""), чтобы диктор их пропускал.
- Лукбуки. Один образ из нескольких вещей описывается общей фразой, а список вещей со ссылками даётся текстом рядом.
- Иконки-кнопки. У сердечка «В избранное» и корзины нужна текстовая подпись действия, а не описание рисунка.
Как организовать подписи в большом каталоге
Когда в каталоге сотни товаров по несколько фото, вручную писать всё с нуля нереалистично. Практичная схема такая:
- в админке у каждого фото есть отдельное поле для описания, а не одно на весь товар;
- шаблон подставляет название и цвет, а ракурс выбирается из списка: «спереди», «сзади», «на модели», «деталь»;
- для деталей и фото на модели поле дополняется вручную;
- имена файлов вроде IMG_2043 в качестве alt не подставляются никогда.
Автоматически собранную подпись стоит считать черновиком: контент-менеджер должен её просмотреть, особенно если на фото важная деталь.
Проверочный список перед публикацией
- У каждого информативного фото есть описание, и оно отличается от соседних.
- В alt нет слов «фото», «картинка» и набора ключевых фраз.
- Цвет, который виден только на изображении, назван в тексте или в alt.
- Образцы цвета имеют названия.
- Таблица размеров доступна как текст.
- Текст баннера продублирован в alt или выведен обычным текстом.
- Декоративные изображения имеют пустой alt.
- Кнопки-иконки подписаны действием.
- Страницу прослушали экранным диктором или хотя бы просмотрели с отключёнными картинками.
Последний пункт полезно сделать обязательным при приёмке новых шаблонов: так сразу видно, какие сведения о товаре теряются без изображения.
