Дизайн — статьи о сайтах
В продуктовом магазине покупатель выбирает глазами: упаковка, объём, вид товара. Человек, который пользуется программой экранного доступа, картинку не видит, а слышит текст. Если у изображения нет подписи или вместо неё имя файла вроде «IMG_4821.jpg», каталог превращается в набор безымянных ссылок. Ниже разберём, как подписывать изображения так, чтобы каталог оставался понятным.
Что именно озвучивает программа экранного доступа
Основной инструмент здесь — атрибут alt у тега изображения. Программа зачитывает его значение вместо картинки. Если атрибута нет совсем, многие программы озвучивают адрес или имя файла, и покупатель слышит бессмысленный набор символов. Если атрибут есть, но пуст (alt=""), картинку пропускают: это осознанный способ сказать «здесь нет ничего важного».
Поэтому для каждого изображения нужно решить одно: несёт ли оно информацию, которой нет в тексте рядом. От ответа зависит, что писать в alt.
Как подписать фото в карточке товара
Возьмём условный фрагмент каталога:
<h3>Молоко «Лукошко» 3,2%, пакет 930 мл</h3>
<img src="moloko.jpg" alt="Молоко «Лукошко», пакет 930 мл">
<p>89 ₽</p>
<button>В корзину</button>Бренд, тип упаковки и объём в подписи помогают отличить этот товар от соседнего, например от бутылки того же производителя. Но если название уже звучит в заголовке, длинный пересказ в alt даст лишь повтор. Хорошее правило: подпись отвечает на вопрос «что на фото, чего нет в названии?». Это может быть вид упаковки, ракурс («вид сзади, этикетка с составом») или отличие вариантов («набор из трёх банок»).
Не пишите «картинка» или «фотография»: программа и так сообщает, что это изображение. Не вставляйте в подпись набор слов для поисковиков: такой текст неприятно слушать и он не помогает выбрать товар.
Состав, срок годности и другие данные с упаковки
Часто важные сведения есть только на фото задней стороны упаковки: состав, пищевая ценность, условия хранения. Если они существуют лишь в виде картинки, покупатель с нарушением зрения к ним не доступен, а мелкий шрифт на телефоне плохо читают и многие зрячие. Решение для сайта простое: выводить эти сведения текстом в описании карточки, а у фото оставлять короткую подпись, например «Задняя сторона упаковки». Содержание данных магазин берёт из документации производителя и отвечает за его точность.
Баннеры акций и текст на картинках
Если на баннере написано «Скидка на фермерские овощи до воскресенья», этот текст нужно передать. Лучший вариант — сделать надпись настоящим текстом поверх фона, а не частью картинки. Если это невозможно, продублируйте её в alt дословно, включая условия и сроки, и сделайте баннер ссылкой с понятным назначением: «Фермерские овощи со скидкой, перейти в раздел».
То же относится к значкам на фото товара вроде «Новинка» или «Акция»: если они нанесены на картинку, статус должен быть продублирован в тексте карточки.
Декоративные изображения и иконки
- Украшения, разделители, фоновые узоры и фото «для настроения» получают
alt=""или выносятся в CSS. - Иконка корзины внутри кнопки с текстом «В корзину» не требует отдельной подписи.
- Кнопка, состоящая только из иконки (корзина в шапке, лупа поиска), должна иметь название действия: «Корзина, 3 товара», «Найти».
- Значки в фильтрах («без сахара», «веганский») должны сопровождаться текстовой подписью; одной картинки недостаточно.
Проверочный список перед публикацией каталога
- У каждого изображения есть атрибут
alt, пусть и пустой для декоративных. - В подписи нет имён файлов, слов «фото» и «картинка», перечней ключевых слов.
- Подпись не повторяет дословно заголовок рядом, а добавляет различающую деталь.
- Состав и сроки хранения даны текстом, а не только на снимке упаковки.
- Текст баннеров продублирован, а условия акции понятны без картинки.
- Кнопки-иконки имеют название действия.
- Шаблон карточки подставляет подпись автоматически из полей названия, бренда и объёма, а редактор может её уточнить.
- Вы прошли оформление заказа с включённой программой экранного доступа (на компьютере или смартфоне) и не споткнулись о безымянные элементы.
Последний пункт самый показательный: десять минут такой проверки скажут о каталоге больше любого перечня правил. Для владельца магазина полезно заложить подписи в шаблон и в инструкцию для контент-менеджера, чтобы новые товары не появлялись без них.
