Контент
Что такое alt-текст
Alt-текст - это текстовая альтернатива изображению, которую задают в атрибуте alt. Она передает смысл или назначение картинки людям, которые не могут ее увидеть, в том числе пользователям программ экранного доступа. Описание выбирают с учетом роли изображения на странице: для фотографии товара, декоративного узора и кнопки нужны разные решения.
Как выглядит alt в HTML
Допустим, на странице товара показан металлический стеллаж с четырьмя полками. В alt можно кратко указать тип изделия и видимые особенности, которые помогают понять фотографию.
<img
src="/images/stellazh.jpg"
alt="Металлический стеллаж с четырьмя полками"
>Пример описания изображения
Металлический стеллаж с четырьмя полками
Описание сообщает, что изображено. Фразы «купить недорого», список городов и другие рекламные дополнения не помогают понять фотографию.
Как назначение картинки влияет на alt
Информативное изображение
Передайте существенную информацию, которую человек получает из картинки. Для фотографии товара это может быть модель, ракурс или важная особенность, если она имеет значение в данном контексте.
Декоративное изображение
Если картинка служит только украшением, используйте пустой атрибут alt="". Это позволяет вспомогательным технологиям пропустить ненужное описание.
Изображение как действие
Если картинка является единственным содержимым ссылки или кнопки, ее текстовая альтернатива должна объяснять назначение перехода или действия, например «Открыть корзину».
Пустой alt и отсутствие атрибута - разные ситуации. Пустое значение намеренно обозначает изображение, которое можно пропустить. При отсутствии alt некоторые программы экранного доступа могут озвучивать имя файла.
Как писать полезные описания
Учитывать контекст
Определите, зачем изображение добавлено на страницу. Одна и та же фотография может требовать подробного пояснения в инструкции и быть декоративной в другом материале.
Описывать главное
Выберите сведения, без которых теряется смысл изображения. Не перечисляйте каждую деталь фона, если она не помогает понять товар, иллюстрацию или действие.
Избегать рекламного перечисления
Название товара уместно, если оно соответствует изображению. Повторение запросов, ценовых обещаний и регионов превращает описание в неудобный для чтения текст.
Различать ракурсы
Для нескольких фотографий товара описывайте значимые различия: вид сбоку, крепление, комплектацию. Не придумывайте отличия только ради уникального текста для каждой картинки.
Пояснять сложные схемы
Для графика или технической схемы краткого alt может быть недостаточно. Добавьте рядом текст, таблицу или подробное описание, доступное без просмотра изображения.
Проверять результат
Убедитесь, что CMS сохраняет описание в атрибуте alt. Проверьте, понятен ли смысл страницы без картинок и не повторяют ли альтернативы уже озвученный текст без необходимости.
Alt не заменяет подпись к фотографии и не является всплывающей подсказкой. Если информация нужна всем читателям, разместите ее в видимом тексте страницы, а альтернативу сформируйте с учетом этого текста.
Что alt-текст значит для бизнеса
Изображения показывают товар, результат услуги или последовательность действий. Текстовые альтернативы помогают сохранить эту информацию для людей, которые пользуются программами экранного доступа или не видят загруженную картинку. Это делает предложение компании понятнее для более широкой аудитории.
Для SEO alt дает дополнительный контекст изображения, но заполнение атрибута само по себе не гарантирует рост трафика и продаж. Важно, чтобы фотографии соответствовали предложению, описания передавали их смысл, а страница в целом помогала выбрать товар или обратиться за услугой.