Если рекламный баннер служит ссылкой, его alt-текст должен помогать понять, куда ведёт переход. «Зелёный прямоугольник с чашкой» описывает оформление, но ничего не говорит о предложении. «Кофе навынос: меню и цены» полезнее, если баннер действительно открывает такое меню.
Alt — текстовая замена изображения в HTML. Её используют программы экранного доступа; браузер также может показать этот текст, если картинка не загрузилась. Ниже разберём обычный баннер-картинку внутри ссылки. Для сложного рекламного виджета, анимации или iframe одной настройки alt может быть недостаточно.
Сначала определите роль баннера
У одной фотографии могут быть разные описания в зависимости от места на странице. В статье о предметной съёмке важны детали кадра. В рекламе, которая открывает каталог, важнее назначение ссылки. Поэтому не копируйте описание файла из медиатеки во все размещения автоматически.
Перед заполнением поля ответьте на два вопроса: что человек должен узнать из баннера и что произойдёт после нажатия? Если ссылка ведёт на подборку товаров, назовите эту подборку. Если она открывает форму записи, укажите действие и услугу. Не обещайте мгновенную запись, когда за ссылкой только страница с контактами.
Как написать alt для баннера-ссылки
Возьмите смысл предложения, добавьте понятное назначение перехода и уберите слова, которые не помогают выбрать ссылку. Для условного магазина с баннером «Осенняя коллекция обуви» подойдёт «Осенняя обувь: посмотреть коллекцию». Для рекламы мастерской — «Ремонт велосипедов: услуги и запись», если на открываемой странице есть оба раздела.
Текст должен соответствовать видимому сообщению. Не превращайте alt в отдельное рекламное обещание: нельзя писать «Доставка бесплатно», если картинка и страница этого не подтверждают. Существенное условие акции не стоит заменять общим «Выгодное предложение». Если смысл не помещается в короткую фразу, вынесите подробности в обычный текст рядом с баннером.
Вот упрощённый пример разметки для условного сайта:
<a href="/osennyaya-obuv/">
<img src="/images/autumn.jpg"
alt="Осенняя обувь: посмотреть коллекцию">
</a>Не начинайте с «изображение баннера» и не перечисляйте ключевые слова через запятую. Не нужно описывать цвет фона, положение логотипа и форму кнопки, если эти детали ничего не добавляют к назначению ссылки. При этом название товара, услуги или бренда может быть нужно, чтобы отличить одно предложение от другого.
Когда допустим пустой alt
Пустое значение alt="" подходит для изображения, которое не добавляет информации. Например, внутри одной ссылки стоят декоративная картинка и видимый текст «Открыть каталог светильников». Если картинка лишь повторяет это сообщение, дополнительное озвучивание будет мешать.
Но подпись где-то под баннером не всегда даёт имя самой ссылке. Если картинка — единственное содержимое ссылки и другого доступного названия нет, пустой alt оставит переход без понятного назначения. Проверяйте именно ссылку целиком, а не наличие похожей фразы поблизости.
Пустое значение и отсутствие атрибута — разные вещи. Если alt удалён, некоторые программы экранного доступа могут прочитать имя файла. У «banner-final-v7.jpg» нет полезного для посетителя смысла. Для декоративной картинки оставьте пустой атрибут, а для содержательной — напишите подходящий текст.
Что проверить в редакторе и на странице
- Найдите поле «Альтернативный текст» у изображения. Не путайте его с подписью под фотографией, именем файла или всплывающей подсказкой title.
- Сохраните страницу с баннером и откройте её для просмотра. Если редактор хранит собственную копию описания, изменение в медиатеке может не обновить уже вставленный баннер.
- Проверьте конечный адрес: он должен соответствовать обещанию alt. Для разных рекламных переходов используйте разные, понятные названия.
- Попросите разработчика проверить доступное имя ссылки в дереве доступности браузера. При проверке экранным диктором должно быть понятно назначение перехода без рассматривания картинки.
- Проверьте переход с клавиатуры: фокус виден, ссылка открывает ожидаемую страницу. Alt сам по себе не исправляет невидимый фокус или неработающий переход.
В рекламной сети поля для alt может не быть. Тогда уточните у площадки, как задаётся доступное имя креатива и что попадает в итоговую разметку. Не считайте текст, сохранённый только в имени загруженного файла, заменой этой проверки.
Для посетителя, который видит баннер, текст по-прежнему должен читаться на самом изображении. Проверьте контраст надписей. А если картинка загружается слишком долго, отдельно уменьшите вес файла: альтернативное описание не заменяет исправление загрузки.
Видео: как работает alt у изображения
В уроке показана работа с тегом img в редакторе кода и браузере. Объяснение alt начинается с 00:37, а с 01:36 разобрано, когда описание необходимо. При проверке баннера применяйте эту основу с учётом назначения ссылки.
Перед сдачей баннера прочитайте его alt как обычную ссылку: понятно ли, что откроется, совпадает ли это с предложением и не дублирует ли описание видимый текст внутри той же ссылки? Если на эти вопросы есть ясный ответ, описание выполняет свою задачу.
