Дизайн — статьи о сайтах
В каталоге поставщика офисной мебели изображения несут основную информацию: цвет столешницы, форма подлокотников, наличие замка в тумбе. Человек, который пользуется программой экранного доступа, или посетитель с отключёнными картинками этого не увидит. Без текстовых описаний ему останутся лишь название товара и сухая таблица характеристик. Рассмотрим, как составить такие описания, чтобы они действительно помогали выбирать.
Что делает атрибут alt и где он работает
Атрибут alt задаёт текстовую альтернативу изображению. Программа экранного доступа зачитывает её вслух. Её же видно, если картинка не загрузилась, например из-за медленного соединения в офисе или ограничений корпоративной сети. Это не место для перечисления поисковых фраз. Пишите так, как описали бы фото коллеге по телефону, чтобы он понял, что на нём важно для выбора.
Что описывать на фото товара
Универсальная схема для мебели: что это за предмет, чем он отличается, в каком ракурсе показан. Отличие — это материал, цвет, конструкция опор, наличие подголовника или ящиков. Всё, что уже написано в названии и характеристиках рядом, повторять не нужно: иначе экранный доступ дважды зачитает одно и то же.
Не начинайте с слов «изображение» или «фото»: программа и так сообщает, что это картинка. Не добавляйте артикулы и перечисления вроде «стол купить недорого». Такие подписи мешают, а не помогают.
Условный пример: карточка письменного стола
Допустим, на странице стола «Прямой 140×70» (название выдуманное) есть пять изображений. Подписи могут быть такими:
- Главное фото: «Письменный стол со светлой столешницей под дерево на чёрных металлических опорах, вид спереди».
- Вид сбоку: «Под столешницей справа закреплена тумба с тремя ящиками, опора слева — П-образная».
- Образец отделки: «Образец цвета: дуб светлый».
- Схема размеров: «Схема стола: ширина 140 см, глубина 70 см, высота 75 см».
- Декоративная иконка у блока доставки: пустой alt (alt=""), потому что рядом уже есть текст.
Обратите внимание, что на втором фото описана не вся сцена, а то, что важно покупателю: тумба и тип опоры. Подробности о фоне, освещении и интерьере в подписи не нужны.
Особые случаи: образцы, схемы, баннеры, сертификаты
Образцы цветов и материалов. Если цвет выбирается кликом по квадрату с образцом, у каждого элемента должно быть название цвета в тексте или в alt. Один лишь цвет без названия недоступен тем, кто его не различает.
Схемы и чертежи. Короткий alt с основными размерами можно дополнить таблицей размеров в тексте страницы. Тогда информация доступна всем, а не только тем, кто видит чертёж.
Баннеры с текстом. Если на изображении написано условие акции, этот текст должен быть и в alt, и лучше как обычный текст на странице. Картинки с вшитым текстом также плохо масштабируются.
Сертификаты и документы. Достаточно указать, что это за документ, и добавить рядом ссылку на текстовую версию или название файла с типом и объёмом.
Картинки-ссылки. Для логотипа, ведущего на главную, или значка корзины alt должен описывать действие: «На главную», «Корзина», а не «логотип».
Как встроить подписи в работу с каталогом
В каталоге, где сотни позиций, вручную писать alt для каждого снимка нереально, поэтому нужны правила на уровне шаблона:
- В карточке товара у каждого изображения есть отдельное поле «Описание для доступности», а не только подпись для внутреннего учёта.
- При импорте из таблицы или учётной системы можно собирать черновик alt из полей «тип», «материал», «цвет». Но такой текст нужно просматривать: автосборка не отличит вид спереди от вида сбоку.
- Для декоративных элементов шаблон сам выводит пустой alt.
- Ответственного назначьте заранее. Обычно это контент-менеджер, который загружает фото.
Проверочный список для страницы каталога
- У каждого значимого изображения есть alt, и он описывает его содержание.
- Подпись не повторяет название товара и соседний текст дословно.
- Нет слов «картинка» и «фото», артикулов и набора ключевых слов.
- Образцы цветов и материалов имеют названия.
- Размеры со схем продублированы текстом.
- Декоративные изображения имеют пустой alt.
- Баннеры с текстом продублированы текстом на странице.
- Картинки-ссылки и кнопки описывают действие.
- Страница прочитана программой экранного доступа или хотя бы просмотрена с отключёнными изображениями, чтобы убедиться, что смысл не потерян.
Начните с самых посещаемых разделов: кресел, столов, шкафов. Закрепите правила в шаблоне карточки, и последующие позиции будут получать нормальные описания без отдельных усилий.
