Дизайн — статьи о сайтах
На сайте поставщика упаковки картинки часто передают то, чего нет в тексте: форму коробки, расположение клапанов, оттенок материала, вид печати. Незрячий посетитель со скринридером и человек с отключённой загрузкой картинок на медленном мобильном соединении получают от такой страницы только пустоту или набор имён файлов вроде IMG_0457.jpg. Подписи к изображениям, то есть атрибут alt, решают эту проблему и входят в базовые требования руководства WCAG 2.0 (критерий 1.1.1).
Что должен делать alt-текст в каталоге упаковки
Альтернативный текст заменяет изображение там, где его не видно. Поэтому спрашивайте себя не «что нарисовано?», а «какую информацию потеряет человек без этой картинки?». Для фото товара это тип изделия и отличительные признаки. Для чертежа это то, что он поясняет. Для значка это смысл или действие, которое он обозначает.
Не пишите «фото», «картинка», «изображение»: скринридер и так сообщает, что это графика. Не набивайте подпись ключевыми словами через запятую. Такой текст неудобно слушать, и он не помогает понять, чем один товар отличается от другого.
Фотографии товаров: как отличить одну коробку от другой
В каталоге много однотипных позиций, поэтому подпись должна различать их. Укажите вид изделия, материал, ключевой признак и, если это важно, состояние: закрыто, открыто, в сборе, развёртка.
Условный пример карточки гофрокороба:
- слабая подпись:
alt="коробка"; - лучше:
alt="Четырёхклапанный короб из бурого гофрокартона, закрыт, клапаны заклеены лентой".
Артикул, размеры и цену оставьте в тексте карточки. Не дублируйте их в alt, иначе скринридер прочитает одно и то же дважды. Если рядом уже есть заголовок «Короб 300×200×150 мм», в подписи достаточно описать то, чего в заголовке нет.
Чертежи, развёртки и схемы с размерами
Это самый проблемный тип изображений. Все размеры в короткий alt не уложить, и не нужно. Сделайте так:
- в alt дайте краткий смысл:
alt="Развёртка короба с обозначением длины, ширины и высоты"; - сами значения выведите обычной таблицей или списком рядом: длина, ширина, высота, допуск, толщина картона;
- если схема сложная, добавьте абзац с пояснением, как читать обозначения.
Так информацию получат все, а таблицу ещё и можно скопировать в спецификацию заказа.
Образцы материалов, цвета и виды печати
Если на странице есть плашки с вариантами покрытия, цвета плёнки или типа нанесения, название варианта должно быть текстом. Подпись к плашке повторяет это название: alt="Матовая ламинация". Если название уже написано рядом, например в подписи под образцом, поставьте пустой alt="", чтобы не читать его дважды.
Не полагайтесь на цвет как единственный носитель смысла. Фраза «выберите зелёный образец» бесполезна для человека, который не различает цвета. Дайте каждому варианту название или код.
Значки, логотипы и картинки-ссылки
Для картинки, которая служит ссылкой или кнопкой, alt описывает действие или адресат, а не внешний вид: alt="Скачать прайс-лист в PDF", а не «иконка со стрелкой». Для логотипа в шапке, ведущего на главную, подойдёт название компании. В подписи значка сертификата укажите, что он подтверждает, если такой смысл есть. Если значок только украшает, ставьте пустой alt.
Чисто декоративные элементы (разделители, фоновые узоры, повторяющиеся иконки рядом с текстом) лучше выводить через CSS. Если это обычные img, используйте alt="". Само отсутствие атрибута хуже: скринридер может прочитать имя файла.
Короткий проверочный список для страницы каталога
- У каждого img есть атрибут alt, даже если он пустой.
- Подпись фото товара называет тип изделия и его признак, а не просто «коробка».
- Артикул, размеры и цена не дублируются в alt, а остаются в тексте.
- У чертежа есть краткий alt и таблица размеров рядом.
- Варианты материалов и цветов названы текстом.
- У картинок-ссылок alt говорит, куда ведёт ссылка или что она делает.
- Декоративные изображения имеют пустой alt или вынесены в CSS.
- В подписях нет слов «фото», «картинка» и перечней ключевых слов.
- Отключите загрузку картинок в браузере и проверьте, что страница по-прежнему позволяет выбрать товар.
Если каталог большой, договоритесь о шаблоне подписи для каждого типа изображений и закрепите его в инструкции для тех, кто наполняет сайт. Тогда новые позиции будут описываться единообразно, а проверка сведётся к просмотру нескольких страниц.
