Альтернативные тексты для фото товаров: правила

Незрячий покупатель заходит в ваш каталог с программой чтения с экрана. Вместо фото товара она зачитывает ему «изображение image_00417.jpg» — и человек не понимает, что перед ним. Или картинка не загрузилась на медленном мобильном интернете, и на её месте у обычного клиента пустой квадрат без единого слова. Обе ситуации решает одна маленькая, но важная деталь — альтернативный текст, alt.

Разберём правила написания alt для фотографий товаров в магазине на 1С-Битрикс: какие задачи он решает, что писать и чего избегать, как настроить alt в инфоблоках и автоматизировать его для большого каталога. Тема на стыке доступности, UX и SEO, и грамотная работа с контентом каталога — часть общей автоматизации на 1С.

Что такое alt и зачем он нужен

Alt (альтернативный текст) — это значение атрибута alt у тега img. Оно не отображается на странице при нормальной загрузке картинки, но выполняет две видимые роли: его зачитывает программа чтения с экрана незрячему пользователю и его показывают вместо изображения, если оно не загрузилось.

По сути alt — это словесный эквивалент картинки. Там, где зрячий пользователь видит фото, кто-то другой (человек или машина) получает вместо него текст. Для интернет-магазина это особенно важно: фотография товара несёт смысл, влияющий на решение о покупке, и лишить части аудитории доступа к этому смыслу — значит терять клиентов и нарушать нормы доступности.

Три задачи alt: доступность, запас, SEO

Alt полезен сразу по трём направлениям, и понимание всех трёх помогает писать его правильно.

• Доступность. Незрячие и слабовидящие пользователи с программой чтения с экрана понимают содержание фото только через alt. Без него товар для них — «безымянная картинка».
• Запасной вариант. Если изображение не загрузилось (медленная сеть, битая ссылка), alt отображается на его месте и объясняет, что там было.
• SEO. Поисковые системы используют alt, чтобы понять содержание изображения — это влияет на показ товара в поиске по картинкам и косвенно на понимание страницы.

Важно, что все три задачи решаются одним и тем же честным описательным alt. Не нужно выбирать между доступностью и SEO — правильно написанный alt хорош для всех сразу.

Alt, title и подпись — не одно и то же

Частая путаница — смешивание alt с другими способами подписать изображение. У них разные роли и разные читатели.

Главное правило: alt — это не место для того же текста, что в подписи, и не дубль title. Alt описывает, что на картинке, для тех, кто её не видит. Подпись поясняет фото для всех. Заменять одно другим — ошибка, потому что у них разные читатели и разные цели.

Что писать в alt для фото товара

Хороший alt описывает изображение так, как вы описали бы его человеку по телефону: кратко, по сути, с точки зрения покупателя. Для фотографии товара это обычно название плюс значимая для выбора деталь.

• Название товара. Основа alt — что это за товар, конкретно и узнаваемо.
• Значимая деталь. Цвет, ракурс, комплектация или состояние, если они видны и важны для выбора.
• Точка зрения покупателя. Описывайте то, что помогает принять решение, а не техническую мета-информацию.

Например, для фото кресла осмысленный alt — это модель и цвет обивки, а не «фото», «картинка товара» или имя файла. Ориентир простой: прочитав alt вслух, человек должен понять, что на фото, без самого фото.

Декоративные изображения и пустой alt

Не всякое изображение нужно описывать. Если картинка чисто декоративная и не несёт информации — фоновый узор, разделитель, иконка, дублирующая соседний текст, — правильно оставить пустой alt (alt="").

Пустой alt — это не забытый атрибут, а осознанный сигнал: программа чтения с экрана пропустит такую картинку и не будет отвлекать пользователя. Ошибка в обе стороны: описывать декор (незрячий получит поток бессмысленных «украшение», «линия», «фон») или, наоборот, вообще убрать атрибут (тогда скринридер может зачитать имя файла). Правило: несёт смысл — описываем, чистое украшение — пустой alt.

Длина, стиль и переспам

Alt должен быть достаточно информативным и при этом коротким — его ведь зачитывают вслух, и длинный поток утомляет. Несколько принципов стиля.

• Кратко. Одна ёмкая фраза, а не пересказ всей карточки товара.
• Без «фото» и «изображение». Скринридер и так объявляет, что это картинка, — дублировать не нужно.
• Без имени файла. «image_00417.jpg» бесполезно и раздражает.
• Без переспама. Набивка ключевыми словами вредит доступности и расценивается как манипуляция, не поднимая позиции.

Соблазн превратить alt в поле для SEO-ключей велик, но он вредит и людям, и в конечном счёте самому SEO. Честный описательный alt одновременно удобен незрячему пользователю и понятен поисковику — это и есть оптимум.

Alt в инфоблоках 1С-Битрикс

В магазине на 1С-Битрикс изображения товаров хранятся в инфоблоках: главное фото и дополнительные картинки — как свойства элемента. Соответственно, и alt задаётся на уровне этих свойств, а выводится в шаблоне карточки и списка товаров.

Практически это означает, что alt можно вести двумя способами: заполнять вручную для каждого фото или формировать программно из данных товара при выводе. Для витринных, ключевых товаров осмысленный ручной alt оправдан. Но на каталоге в тысячи позиций заполнять alt руками нереально — здесь на помощь приходит генерация по шаблону из свойств инфоблока. Про гибкую работу со структурами данных каталога мы писали в статье про D7 и ORM в Битрикс.

Автогенерация alt по шаблону

Для большого каталога разумный подход — формировать alt автоматически из свойств товара. Это гарантирует, что alt есть у всех фото, а не у случайной части, и снимает ручной труд контент-менеджера.

1. Выберите источник. Определите, из каких свойств собирается alt: обычно название товара плюс ключевая характеристика (цвет, бренд, модель).
2. Задайте шаблон. Опишите формулу — например, «название + значимое свойство» — так, чтобы результат читался естественно.
3. Обработайте разные ракурсы. Для дополнительных фото добавьте различающую часть, чтобы alt не были одинаковыми.
4. Оставьте ручной приоритет. Если alt заполнен вручную, он важнее шаблонного — для витринных товаров это ценно.
5. Проверьте на разных товарах. Убедитесь, что шаблон даёт вменяемый результат на всём разнообразии каталога, а не одинаковую заглушку.

Такой гибрид — ручной alt для главных товаров и генерация для длинного хвоста — практичный компромисс между качеством и объёмом. Реализуется он как доработка вывода каталога; про подход к кастомной функциональности — статья про разработку модуля для Битрикс.

Alt для галереи и разных ракурсов

У товара обычно несколько фотографий: разные ракурсы, детали, комплект. Если у всех одинаковый alt, теряется смысл — пользователь не понимает, чем кадры отличаются.

• Различайте ракурсы. «вид спереди», «вид сбоку», «в интерьере» — если это видно и важно.
• Показывайте детали. Если фото крупным планом показывает материал или элемент, отразите это.
• Не повторяйтесь механически. Одинаковый alt на пяти фото — сигнал, что описания не продуманы.
• Держите узнаваемость. В каждом alt остаётся название товара, меняется уточняющая часть.

Для незрячего пользователя именно различия в alt превращают «пять картинок» в осмысленную галерею. При автогенерации это учитывают, добавляя к шаблону различающий признак по номеру или типу изображения.

Как проверить alt на сайте

После настройки alt важно убедиться, что всё работает как задумано. Проверку ведут по трём осям.

1. Технически. Атрибут alt присутствует у всех значимых изображений и пуст у декоративных.
2. Содержательно. Описания осмысленны, это не имя файла, не «фото» и не набор ключей.
3. На слух. Ключевые страницы прогоняют программой чтения с экрана или инструментом проверки доступности и слушают, понятно ли, что на фото.
4. Шаблон. Для каталога проверяют результат автогенерации на разных товарах, чтобы не было одинаковых заглушек.

Такую проверку полезно встроить в регулярный контроль качества сайта, а не делать разово. Каталог меняется, добавляются товары, и alt должен оставаться в порядке вместе с ним.

Частые ошибки

• Alt отсутствует. У изображений нет атрибута — скринридер зачитывает имя файла, поиск не понимает картинку.
• Имя файла в alt. «image_00417.jpg» вместо описания — бесполезно и раздражает.
• «Фото товара» на всём. Одинаковая заглушка вместо конкретики не помогает никому.
• Переспам ключами. Набивка ключевых слов вредит доступности и не поднимает позиции.
• Описан декор. Декоративным картинкам дают текст вместо пустого alt, засоряя вывод скринридера.
• Одинаковый alt на галерее. Разные ракурсы с одним описанием теряют смысл.
• Alt путают с подписью. В alt дублируют видимый текст или title, игнорируя его отдельную роль.

Чек-лист внедрения

1. Alt есть у всех значимых фото. Ни одно смысловое изображение товара не осталось без описания.
2. Декор помечен пустым alt. Украшения и разделители имеют alt="" и пропускаются скринридером.
3. Описания осмысленны. Название товара плюс значимая деталь, без имени файла и заглушек.
4. Нет переспама. Alt честный и краткий, а не поле для SEO-ключей.
5. Галерея различается. Разные ракурсы имеют разные, узнаваемые alt.
6. Настроена автогенерация. Для большого каталога alt формируется из свойств инфоблока по шаблону.
7. Проверено на слух. Ключевые страницы прогнаны скринридером или инструментом доступности.

Вывод

Альтернативный текст для фото товаров — небольшая деталь с тройной пользой: он делает каталог доступным для незрячих покупателей, страхует на случай незагрузившейся картинки и помогает поиску понять изображение. И всё это решается одним честным описанием, а не выбором между доступностью и SEO.

Пишите alt кратко и по делу — название товара плюс значимая деталь, без имени файла, заглушек и переспама, а декор помечайте пустым alt. На большом каталоге на 1С-Битрикс автоматизируйте alt генерацией по свойствам инфоблока, оставив ручной приоритет для витринных товаров. Так вы закроете и норму доступности, и практическую пользу для трафика без бесконечного ручного труда.