Что такое «ALT»

ALT (чаще говорят «alt-текст») — это значение атрибута alt у тега <img> (а также у <area> и у кнопки-картинки <input type="image">). Это текстовая альтернатива изображению: её читают скринридеры, она показывается при ошибке загрузки и используется поисковиками для понимания картинки.

Время прочтения:

4 минуты

Дата публикации:

13.09.25

32

Главная

Что такое «ALT»

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

Зачем нужен alt

Доступность (a11y) — Скринридер зачитывает alt незрячим пользователям. Если картинка декоративная, ставят пустой alt="", чтобы скринридер её пропустил.
Юзабилити — Если файл не загрузился, браузер выводит alt — пользователь понимает, что должно быть на месте изображения.
SEO (особенно поиск по картинкам) — Поисковые системы используют alt как один из сигналов темы изображения (вместе с названием файла, подписью, окружением текста). У кликовые картинки-ссылки alt выступает как анкор этой ссылки.

Как писать хороший alt

Опишите смысл, а не «картинку как объект». Не «картинка товара», а «Клинкерная плитка Keralux, цвет графит, 30×30»;
Функциональные картинки → описывайте действие. Кнопка-лупа: alt="Поиск", а не «лупа». Крестик: alt="Закрыть";
Без «изображение/фото/пикча». Это лишнее — скринридер и так знает, что это <img>;
Коротко и по делу. Часто хватает 5–12 слов. Исторический «порог 125 символов» — не правило, но лаконичность помогает;
Если на картинке текст, важный для смысла — передайте его в alt;
Язык alt = язык страницы;
Декоративным — пустой alt="" (+ при необходимости role="presentation"/aria-hidden="true");
Сложные графики/диаграммы: в alt — краткий итог («Доля продаж клинкера выросла с 12% до 26% YoY»), а подробности — в подписи/тексте рядом или figcaption.

Когда НЕ нужен осмысленный alt

Иконки, не несущие смысла (декор, разделители) → alt="";
Фоновые изображения через CSS — у них нет alt: смысл передавайте текстом в разметке;
Дубли логотипов, если рядом уже есть текст названия (но для основного логотипа обычно alt="Название бренда").

alt vs другие атрибуты/элементы

title — всплывающая подсказка; скринридер может не озвучивать. Не путать с alt;
figcaption — видимая подпись к изображению (может дополнять alt, но не заменяет);
aria-label/role="img" — нужны для «не-img» элементов, исполняющих роль картинки; для <img> достаточно alt.

Примеры

Товар (хорошо)

<img src="/img/tiles/keralux-30x30-graphite.jpg"
     alt="Клинкерная плитка Keralux, графит, 30×30 мм — образец фактуры">

Кнопка-картинка (функция, не внешний вид)

<input type="image" src="/icons/search.svg" alt="Поиск">

Логотип в шапке (ссылка на главную)

<a href="/" aria-label="На главную">
  <img src="/logo.svg" alt="Keralux">
</a>

График (краткий смысл в alt, детали в подписи)

<figure>
  <img src="/img/chart-sales.png"
       alt="Продажи плитки: рост с 1,2 до 2,1 млн ₽ за квартал">
  <figcaption>Q1–Q4 2024: детальная разбивка по категориям в тексте ниже.</figcaption>
</figure>

Картинка-ссылка (alt = анкор)

<a href="/katalog/klinker/">
  <img src="/banners/klinker.jpg" alt="Клинкерная плитка — каталог и цены">
</a>

Частые ошибки

Пустой alt у значимых изображений (товар, схема, кнопка);
Ключевой спам: «купить клинкер цена москва скидка» — бессмысленно для людей и плохо для поисковиков;
«Картинка товара», «фото», «image123» — бесполезно;
Дублирование длинной подписи в alt слово в слово (задача alt — краткая альтернатива);
Одинаковый alt для десятков разных изображений;
Иконки соцсетей с alt="facebook icon" вместо alt="Facebook" (если это ссылка на профиль).

Особые случаи

SVG: у встроенного <svg> альтернативный текст задают <title> внутри SVG или атрибутом aria-label у обёртки;
Карты-изображения (<area>): каждому area нужен alt;
Ленивая загрузка: loading="lazy" не влияет на alt — он обязателен так же.

Влияние атрибута alt на SEO

alt помогает Image Search и косвенно общей релевантности страницы;
Для изображений-ссылок alt = текст якоря (анкор) — учитывается в тематике целевой страницы;
Вместе с alt проверьте: имя файла (klinker-30x30.jpg), подпись/окружение, ширину/высоту (устойчивый layout), разметку (например, Product/ImageObject).

Мини-чек-лист по alt

У всех значимых <img> есть информативный alt;
Декоративные <img> → alt="" и/или aria-hidden="true";
Функциональные иконки описывают действие, а не форму;
Без спама и «image of…»; язык соответствует странице;
Для сложных визуализаций — краткий alt + подробности в тексте/figcaption;
Картинки-ссылки имеют alt как осмысленный анкор;
Проверено Lighthouse/аудит доступности: «Image elements have [alt]».

заключение

alt — это обязательная текстовая альтернатива изображению. Пишите коротко и по смыслу (для людей!), используйте пустой alt="" у декора, описывайте функцию у кнопок, не спамьте ключами. Так вы одновременно улучшите доступность, UX и видимость в поиске по картинкам.