В e-commerce изображение — главный аргумент. Для пользователя со скринридером этот аргумент звучит словами. Хороший alt-текст не дублирует название товара, а передаёт смысл кадра: что на фото, какие важные признаки вещи и чем этот кадр помогает принять решение.
Ниже — понятные принципы и готовые примеры для карточек товара, баннеров и контента с образами.
Что такое «хороший» alt-текст в моде
В доступных интерфейсах alt-текст:
- описывает ключевой предмет кадра и его отличительные признаки (тип вещи, цвет/принт, материал, силуэт, характер посадки);
- учитывает контекст кадра (на вешалке, на модели, в движении, детали крупным планом);
- помогает выполнить пользовательскую задачу (понять, что за вещь и подойдёт ли она);
- не повторяет служебные части интерфейса и не перегружает деталями.
Формула, которая работает для фешн-контента:
[Что это] + [ключевые признаки] + [контекст/ракурс] + [если уместно — назначение/сезон].
Примеры alt-текстов для карточки товара
Плохо → Хорошо
- «Пальто» → «Пальто женское, шерстяное, прямого кроя, графитового цвета, длина миди; на модели, вид спереди».
- «Платье» → «Платье сатиновое, цвет изумруд, силуэт А-line, длина миди, V-вырез; на модели в движении».
- «Кроссовки» → «Кроссовки белые кожаные с бежевой подошвой, низкий профиль, шнуровка; ракурс сбоку».
- «Ремень» → «Ремень кожаный чёрный, матовая пряжка серебристая, ширина 3 см; крупный план фактуры».
- «Рубашка» → «Рубашка льняная, светло-голубая, свободная посадка, воротник стойка; на вешалке, вид спереди».
- «Джинсы» → «Джинсы прямые, деним тёмно-синий без потертостей, посадка высокая; на модели, вид сзади».
- «Юбка» → «Юбка плиссе, цвет пудровый, длина миди, лёгкая ткань; в движении, ракурс полубоком».
- «Свитер» → «Свитер шерстяной, мелкая коса, цвет айвори, свободный крой; крупный план вязки».
- «Сумка» → «Сумка-кроссбоди, кожа зернистая карамельного цвета, клапан на магнитах; на модели через плечо».
- «Пиджак» → «Пиджак мужской, серый меланж, полуприталенный, две пуговицы; на модели, вид спереди в полный рост».
Примеры для баннеров и look-контента
Баннер коллекции:
«Осенняя капсульная коллекция: пальто миди, свитер крупной вязки и брюки прямые в оттенках карамели и графита; модель на улице, листва».
Look-карусель:
«Образ 2 из 5: платье чёрное футляр, жакет oversize в клетку, лоферы; деловой стиль».
Деталь изделия:
«Крупный план: ручная строчка по борту пиджака, шерсть с добавлением кашемира».
Где alt-текст не нужен
В декоративных изображениях alt остаётся пустым: alt="". Это стрелки, фоны, разделители, абстрактные паттерны, не несущие смысл для задачи пользователя. Так скринридер не засоряет озвучку.
Частые ошибки и как их избегают команды
- Дублирование названия товара («Пальто Арт. 123») вместо смысла кадра.
- Перегруз описания («пальто красивое, стильное, модное») — такие слова не помогают принять решение.
- Цвета без контекста («тёмный») там, где важен оттенок («графитовый», «айвори»).
- Отсутствие информации о ракурсе и посадке, когда это ключ к выбору.
- Описание текста на баннере без передачи смысла предложения («-20%») — корректнее: «Скидка 20% на верхнюю одежду до 15 ноября».
Шаблоны для контент-команды
Для карточек товара:
[Тип вещи], [материал/фактура], [цвет/принт], [силуэт/посадка], [длина/высота], [контекст/ракурс].
Для деталей:
Крупный план: [деталь] — [материал/обработка/фурнитура].
Для баннеров:
[Смысл предложения/повод], [что в кадре/категория], [срок/условие, если есть].
Шаблоны удобно хранить в CMS, чтобы редакторам было проще поддерживать единый стиль.
Как это встраивается в процесс
- Фотопродакшн фиксирует ракурсы, при которых посадка и длина читаются без догадок.
- Контент-менеджер пишет alt по шаблонам, ориентируясь на задачу кадра.
- Дизайнер и разработчик согласуют, где alt, где подпись, где aria-label у иконок-кнопок.
- Перед релизом проводится короткая «прослушка» карточки NVDA/VoiceOver: изображение → название → цена → кнопки → параметры.
Вопросы локализации
Если карточка на двух языках, alt-тексты пишутся на языке страницы. В редких случаях, когда в кадре важна надпись на другом языке (шильдик, принт-слоган), эта надпись передаётся как часть описания.
Что это даёт бренду
- Понятный голос интерфейса для пользователей со скринридером.
- Меньше неоднозначности в выборе размеров/посадки — ниже количество возвратов по «ожидание/реальность».
- Единый стандарт описаний для редакторов и подрядчиков.
- Потенциальный вклад в поисковую индексацию изображений за счёт осмысленных описаний.
❤️ Лепота подготовила бесплатный гайд по адаптации сайта. Переходите по ссылке и сделайте свой онлайн-магазин удобным для всех.