Дизайн — статьи о сайтах
На сайте автомойки картинок обычно больше, чем текста: боксы, пена на кузове, салон до и после, схема проезда, прайс в виде баннера. Человек, который слушает страницу через программу экранного чтения, или тот, у кого на слабой мобильной связи не загрузились фото, видит на их месте только подпись. Разберём, как написать её так, чтобы она несла смысл, а не просто заполняла поле.
Какие изображения на сайте мойки нужно подписывать
Атрибут alt — это короткая текстовая замена картинки. Его зачитывает программа экранного чтения, и он же показывается, если файл не загрузился. Подпись нужна не всем изображениям одинаково, поэтому сначала разделите их на три группы:
- Информативные: результат полировки, салон до и после, схема проезда, фото бокса для крупных машин. Им нужен содержательный alt.
- Декоративные: фоновые брызги, пузыри, разделители блоков. Оставьте пустой alt (alt=''), и программа чтения их пропустит.
- Картинки с текстом: баннер с акцией, прайс, график работы. Их лучше перенести в обычный текст страницы.
Как описать фото работ: суть, а не перечень деталей
Хороший alt отвечает на вопрос: что нужно знать тому, кто не видит эту картинку? Обычно хватает одного короткого предложения. Не начинайте со слов «фото» и «картинка»: программа чтения сама сообщает, что это изображение.
Сравните два варианта для снимка с пеной:
- Слабо: «автомойка недорого мойка кузова город». Это набор слов, на слух он бесполезен и выглядит как попытка накачать страницу ключевыми фразами.
- Лучше: «Тёмный седан в боксе покрыт слоем активной пены, пена стекает по двери».
Если на снимке есть услуга, которую вы продаёте, назовите её. Если фото просто «для красоты», скорее всего, оно декоративное.
Условный пример: страница «Химчистка салона»
Допустим, на странице услуги три изображения: широкий фон-баннер с каплями, пара снимков заднего сиденья до и после и фото зоны химчистки. Разметка может выглядеть так:
<img src='bg-drops.jpg' alt=''>
<figure>
<img src='seat-before-after.jpg'
alt='Заднее сиденье до и после химчистки: слева пятно на ткани, справа ровный чистый цвет'>
<figcaption>Результат химчистки велюровой обивки</figcaption>
</figure>
<img src='dry-clean-zone.jpg'
alt='Отдельный бокс химчистки со стойкой для оборудования'>Фон получил пустой alt. У сравнения есть и alt, и видимая подпись: они не должны дословно повторяться, иначе экранный диктор прочитает одно и то же дважды. Alt описывает, что видно, подпись объясняет, к чему это относится.
Прайс, акции и схема проезда: не прячьте их в картинку
Для автомойки это самый частый источник проблем. Прайс, выложенный как скриншот, нельзя прочитать диктором, нельзя увеличить без потери чёткости и сложно обновить. Разместите его HTML-таблицей: строки — услуги, столбцы — классы кузова. Условия акции пишите обычным абзацем, а баннер оставьте как дополнение.
Со схемой проезда так же: добавьте текстом ориентиры и порядок действий, например «Заезд со стороны улицы, второй поворот во двор, шлагбаум справа». Тогда картинке-схеме хватит краткого alt: «Схема проезда к мойке через двор».
Галереи и слайдеры: как не написать сорок одинаковых подписей
В галерее из 40 снимков уникальный длинный alt для каждого не нужен. Подпишите те фото, которые показывают разное: тип услуги, класс авто, этап работы. Если снимки однотипны, дайте краткие alt с отличием («Кроссовер после мойки днища») и один общий заголовок галереи.
Стрелки слайдера и кнопка увеличения тоже требуют названия. Кнопка из одной иконки должна иметь понятную текстовую метку, например «Следующее фото», иначе диктор скажет просто «кнопка».
Проверочный список перед публикацией страницы
- У каждого информативного изображения есть alt, который можно понять без картинки.
- У декоративных alt пустой, а не отсутствует вовсе.
- Подписи не начинаются со слов «фото» и «изображение» и не состоят из набора запросов.
- Прайс, акции и график работы есть в виде текста или таблицы.
- Alt и видимая подпись не дублируют друг друга слово в слово.
- У кнопок слайдера и галереи есть текстовое название.
- Вы включили чтение страницы программой экранного чтения или отключили загрузку картинок в браузере и проверили, что важное не потерялось.
Такую проверку можно заложить в приёмку новых страниц: она занимает несколько минут и сразу показывает, где информация зависит только от изображения.
