Дизайн — статьи о сайтах
Покупатель косметики выбирает глазами: оттенок, текстура, упаковка. Но не все посетители видят фото. Слепые и слабовидящие пользователи работают со скринридерами (например, JAWS, NVDA, VoiceOver). Кто-то отключает картинки, чтобы экономить трафик в мобильной сети. Иногда изображение просто не загрузилось. Во всех этих случаях вместо картинки читается её текстовая замена, то есть атрибут alt. Ниже разберём, как заполнять его в интернет-магазине косметики.
Что alt должен сообщать в карточке товара
Alt заменяет картинку по смыслу и не пересказывает всё, что на ней изображено. Хороший вопрос для проверки: что потеряет покупатель, если фото исчезнет? Название и бренд уже есть в заголовке карточки. Если повторять их в каждом alt, скринридер прочитает одно и то же пять раз подряд. Полезнее то, чего нет в тексте рядом: цвет и финиш, форма упаковки, что именно показано (флакон, нанесённый образец, набор).
Пример: карточка помады с тремя изображениями
Возьмём условную страницу «Помада матовая Rosewood, оттенок 214». Название вымышленное. На странице три изображения:
- Упаковка. Alt: «Помада в чёрном футляре со снятым колпачком, стик тёплого розово-коричневого цвета».
- Образец на коже. Alt: «Мазок оттенка 214 на тыльной стороне ладони, матовое покрытие».
- Баннер с текстом на картинке. Alt: «Подарочная упаковка по запросу при оформлении заказа». Всё, что написано на баннере, должно оказаться в alt или в обычном тексте рядом.
Цвет называйте словами, понятными без зрения: «тёплый розово-коричневый», а не «роскошный нюд». Одновременно не оставляйте цвет только в картинке. В текстовом описании товара укажите название оттенка и его краткую характеристику.
Палитры и выбор оттенка: самое уязвимое место
Если оттенки выбираются цветными кружками без текста, незрячий пользователь не поймёт, что именно он выбирает. Дайте каждому образцу текстовое название: alt «Оттенок 214, тёплый розово-коричневый» или подпись, скрытую визуально, но доступную скринридеру. Выбранный вариант нельзя обозначать только рамкой вокруг кружка. Добавьте в подпись слово «выбран» или выведите название оттенка текстом под палитрой. Это поможет и людям с нарушениями цветовосприятия. Если на одной картинке собрано множество образцов, список оттенков лучше продублировать текстом под ней.
Когда alt оставляют пустым и как подписывать ссылки-картинки
Декоративным изображениям описание не нужно: разделителям, фоновым узорам, иконке доставки рядом со словом «Доставка». Для них пишут пустой alt (alt=«»), и скринридер их пропускает. Сам атрибут удалять нельзя: некоторые программы тогда зачитывают имя файла вроде IMG_0457.jpg. Чисто оформительские картинки лучше подключать через CSS.
Если картинка служит ссылкой или кнопкой, alt описывает действие, а не внешний вид. Для логотипа: «Название магазина, на главную». Для значка корзины: «Корзина». Если рядом в той же ссылке уже есть текст, картинке достаточно пустого alt.
