Словарь маркетолога

Тег Alt

короткий текстовый описатель, который прикрепляется к изображению на веб-странице

← Ко всем терминам словаря

Что такое Тег Alt

Тег Alt — это короткий текстовый описатель, который прикрепляется к изображению на веб-странице. Он не виден обычному пользователю, когда картинка отображается нормально, но показывается, если изображение не загрузилось или если человек использует программу для чтения экрана (экранное чтение). Этот текст говорит, что именно изображает картинка — например, «Кот сидит на подоконнике и смотрит в окно».

Тег Alt — это не просто «дополнение», а важная часть доступности сайта. Он помогает людям с нарушениями зрения понимать содержание изображений, потому что экранная программа читает этот текст вслух. Также он полезен, когда интернет медленный или картинка сломалась — вместо пустого места пользователь увидит понятное описание.

Даже если вы не думаете о людях с ограниченными возможностями, тег Alt важен для поисковиков. Google и другие поисковые системы не «видят» картинки, как человек — они читают только текст. И если у изображения нет Alt-текста, поисковик не знает, о чём картинка. Это снижает шансы вашей страницы появиться в результатах поиска.

Зачем нужен Тег Alt

Тег Alt решает три главные проблемы: доступность, SEO и пользовательский опыт. Без него вы теряете часть аудитории, снижаете видимость сайта и рискуете запутать людей.

Вот почему он важен:

  • Помогает людям с нарушениями зрения. Они полагаются на экранное чтение — без Alt-текста картинки превращаются в «изображение» или «картинка», что ничего не объясняет.
  • Улучшает SEO. Поисковики учитывают Alt-текст при ранжировании картинок. Хороший текст может привести трафик из поиска по изображениям.
  • Улучшает опыт при проблемах. Если картинка не загрузилась — Alt-текст остаётся как запасной вариант. Пользователь не останется в недоумении.
  • Повышает профессионализм сайта. Сайт с Alt-текстами выглядит более продуманным и заботливым о пользователях.
  • Снижает риск штрафов. В некоторых странах (например, в ЕС и США) отсутствие доступности может считаться нарушением закона.

Как это работает

Тег Alt — это часть HTML-кода, который добавляется к тегу <img>. Когда браузер встречает изображение, он смотрит на атрибут alt и использует его в нужных ситуациях.

Как выглядит код

<img src="kot.jpg" alt="Кот сидит на подоконнике и смотрит в окно">

Здесь alt — это атрибут (дополнительная информация), а текст внутри кавычек — это описание. Браузер не показывает его, если картинка работает. Но как только изображение не загружается — вместо пустого поля появляется этот текст.

Когда Alt-текст срабатывает:

  1. Пользователь использует экранное чтение — программа читает Alt-текст вслух.
  2. Изображение не загрузилось из-за ошибки или медленного интернета — текст отображается на месте картинки.
  3. Поисковый робот анализирует страницу — он использует Alt-текст, чтобы понять тематику изображения.

Важно: Alt-текст должен быть кратким и точным. Не надо писать «картинка с котом» — лучше сразу сказать, что делает кот. Не надо писать слишком длинно — 1–2 предложения достаточно.

Виды Тега Alt

Тег Alt не делится на строгие типы, но его можно использовать по-разному в зависимости от цели изображения:

  • Описательный. Используется, когда картинка несёт смысл — например, схема, фото продукта или инфографика. Текст должен точно описывать содержание: «График роста продаж за 2023 год».
  • Декоративный. Когда картинка просто украшает страницу — например, узор на фоне. В этом случае Alt-текст оставляют пустым: alt="". Это говорит экранному чтению — «игнорируй это».
  • Функциональный. Когда картинка — кнопка или ссылка: «Кнопка «Заказать»». Текст должен указывать действие, а не внешний вид.

Простой пример

Представьте, что вы зашли на сайт интернет-магазина, чтобы купить чай. На странице есть фото пачки зелёного чая с лимоном. Но интернет в кафе слабый — картинка не загрузилась.

Без Alt-текста вы видите пустое место. Вы не знаете, какой чай там изображён — может, это кофе? Может, сок? Вы теряете интерес и уходите.

А если у картинки есть Alt-текст: «Пачка зелёного чая с лимоном, 100 г» — вы сразу понимаете, что это за продукт. Вы можете решить: «Да, я хочу именно этот чай» — и продолжаете покупку.

То же самое происходит с человеком, который слышит сайт через экранное чтение. Без Alt-текста он не узнает, что на картинке — и может пропустить важную информацию.

Как начать

  1. Найдите все картинки на вашей странице — в коде или через инструменты разработчика (в браузере нажмите F12 → вкладка «Элементы»).
  2. Добавьте атрибут alt к каждой картинке, которая несёт смысл. Пишите коротко: что изображено, зачем оно здесь.
  3. Для украшающих картинок — оставьте alt="" (пустые кавычки). Это скажет программам: «Это просто декор, не читай».
  4. Проверьте результат — отключите загрузку изображений в браузере или используйте экранное чтение (например, NVDA для Windows), чтобы увидеть, как звучит ваш текст.
  5. Не пишите «картинка» или «изображение» — это бесполезно. Говорите конкретно: «Дети играют в парке», а не «Картинка детей».

Частые вопросы

Чем Тег Alt отличается от заголовка картинки?
Заголовок (атрибут title) показывается, когда вы наводите курсор на картинку — это подсказка. Alt-текст показывается, когда картинки нет или при чтении экраном — это обязательное описание. Они не взаимозаменяемы.

Можно ли обойтись без Тега Alt?
Можно — но вы потеряете часть аудитории, ухудшите SEO и сделаете сайт менее дружелюбным. Это как оставить вход в магазин без таблички — люди могут не найти, что ищут.

Кому в первую очередь стоит разбираться в Теге Alt?
Веб-дизайнерам, копирайтерам, маркетологам и всем, кто публикует контент в интернете. Даже если вы просто делаете пост в блоге — добавьте Alt-текст к картинкам. Это просто, но сильно влияет на качество вашего сайта.

Смотри также