Альтернативный текст в HTML - как правильно использовать атрибут alt

Введение

Атрибут alt в HTML кажется простой мелочью, но от него напрямую зависит, смогут ли пользователи с экранными читателями понять содержимое страницы, увидят ли поисковые системы ваши изображения и корректно ли отобразится сайт, если картинка недоступна.

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

В этой статье мы будем исходить из реальных задач: адаптация сайта под доступность (a11y), работа с контентом, оптимизация под поисковые системы и поддержка старых или нестабильных соединений, когда изображения могут не загрузиться.

---

Что такое альтернативный текст alt и зачем он нужен

Определение атрибута alt

Атрибут alt (alternative text) — это текстовое описание содержимого изображения в HTML. Он указывается внутри тега img:

<img src="product-photo.jpg" alt="Красная футболка с коротким рукавом на вешалке">
<!-- Здесь alt описывает, что именно изображено на картинке -->

Браузер не показывает alt, если картинка успешно загружена и отображается. Но этот текст используется:

• экранными читателями для людей с нарушением зрения;
• поисковыми роботами;
• браузером, если изображение не удалось загрузить;
• вспомогательными технологиями (брайлевские дисплеи и т.п.).

Проще говоря, alt — это текстовый эквивалент изображения.

Основные задачи альтернативного текста

Давайте перечислим ключевые задачи, которые решает alt:

1. Доступность (accessibility)
   Экранный читатель зачитывает alt вместо изображения. Если alt нет или он неинформативен, незрячий пользователь теряет часть контента.

2. Понимание структуры страницы
   Изображения часто несут смысловую нагрузку: схемы, графики, иллюстрации шагов инструкции. Alt помогает не потерять эти смыслы.

3. Поддержка при ошибках загрузки
   Если картинка не загрузилась, браузер может показать текст alt на ее месте. Пользователь хотя бы поймет, что там должно было быть.

4. SEO и индексация изображений
   Поисковые системы используют alt, чтобы понять, о чем изображение, и корректнее ранжировать его в поиске по картинкам.

5. Поддержка ассистивных устройств и режимов чтения
   Некоторые режимы чтения могут скрывать изображения и оставлять только текст. Alt в этом случае помогает сохранить смысл.

---

Базовый синтаксис атрибута alt

Простейший пример использования

Давайте разберемся на самом простом примере:

<img src="logo.svg" alt="Логотип компании Example">
<!-- Здесь мы кратко описываем, что изображено: логотип какой компании -->

Комментарии к примеру:

• src — путь к изображению.
• alt — текст, который описывает этот src с точки зрения пользователя.

Обязателен ли alt

С точки зрения спецификации HTML атрибут alt обязателен для тега img. Однако:

• HTML разрешает пустой alt, но не его отсутствие;
• валидаторы и инструменты доступности будут ругаться, если у img нет alt вообще.

Пример невалидного кода:

<img src="photo.jpg">
<!-- Так делать не стоит - атрибут alt отсутствует -->

Минимально корректный вариант:

<img src="photo.jpg" alt="">
<!-- Атрибут alt есть, но он пустой (так можно только в определенных случаях, о них ниже) -->

---

Когда alt обязателен, а когда его лучше оставить пустым

Здесь важно не только техническое наличие атрибута, но и содержательная логика. Сейчас мы аккуратно разберем разные типы изображений и то, что сто́ит писать в alt.

Изображения с важным содержанием (контентные)

Если изображение передает важную информацию, которую нельзя опустить, alt должен описывать смысл изображения, а не просто его внешний вид.

Пример: инфографика с числовыми данными.

<img src="sales-2024.png" alt="График роста продаж компании за 2024 год с увеличением с 1 до 3 миллионов рублей">
<!-- Здесь alt передает ключевой смысл: рост и порядок цифр -->

Смотрите, я делаю здесь не просто описание «график на белом фоне», а именно смысл — рост продаж, порядок величин, год.

Еще пример: фотография, которая нужна для понимания статьи.

<img src="author.jpg" alt="Фотография автора статьи Ольги Петровой">
<!-- Пользователь понимает, кто изображен на картинке -->

Правило: если без изображения теряется смысл текста или пользователь не может выполнить задачу — alt обязательно должен содержать полноценное описание.

Декоративные изображения

Декоративные изображения — это элементы дизайна, которые не несут смысловой нагрузки. Например:

• фоны,
• рамки,
• разделительные линии,
• иконки, которые дублируют подписи.

В этом случае alt должен быть пустым, а не описательным:

<img src="line-decor.png" alt="">
<!-- Декоративная линия, ее не нужно озвучивать экранным читателям -->

Почему не нужно писать «Декоративная линия» или «Красный фон»?
Потому что экранный читатель начнет зачитывать бессмысленные детали, которые только помешают восприятию.

Важно: изображение при этом по-прежнему должно иметь alt, просто он пустой. Это сигнал для экранных читателей «изображение можно пропустить».

Изображения-ссылки и кнопки

Если изображение — это ссылка или кнопка (например, иконка «домой» или «поиск»), alt должен описывать действие, а не внешний вид.

Пример с логотипом, ведущим на главную:

<a href="/">
  <img src="logo.svg" alt="Перейти на главную страницу">
  <!-- Здесь картинка выполняет роль ссылки, поэтому alt описывает действие -->
</a>

Пример кнопки поиска:

<button type="submit">
  <img src="search-icon.svg" alt="Найти">
  <!-- Экранный читатель озвучит "Найти", что совпадает с функцией кнопки -->
</button>

Если рядом есть текст, дублирующий назначение, alt можно сделать пустым и завязаться на текст ссылки:

<a href="/profile">
  <img src="user-icon.svg" alt="">
  <!-- Декоративная иконка, смысл передает текст ниже -->
  Профиль
</a>

Информационные иконки и пиктограммы

Иконки бывают разными:

• чисто декоративные (уже разобрали);
• смысловые, которые передают состояние или важную информацию.

Пример иконки статуса:

<img src="status-ok.svg" alt="Оплачено">
<!-- Здесь иконка несет смысл: заказ оплачен -->

Если же статус продублирован текстом:

<img src="status-ok.svg" alt="">
<span>Оплачено</span>
<!-- В этом случае alt можно оставить пустым: смысл уже передает текст -->

Здесь главное — не дублировать один и тот же текст дважды для экранных читателей.

---

Как писать хороший alt: практические принципы

Ориентируйтесь на контекст, а не только на картинку

Самое частое заблуждение — описывать только то, что физически нарисовано. На практике alt должен описывать изображение в контексте страницы.

Например, в интернет-магазине:

<img src="shoe-123.jpg" alt="Мужские кроссовки Nike Air Max черные, размерный ряд 40–45">
<!-- Важно: бренд, тип обуви, цвет и ключевые параметры -->

А если то же фото используется в статье про уход за обувью:

<img src="shoe-123.jpg" alt="Пример загрязненных кроссовок перед чисткой">
<!-- Здесь логичнее описать состояние кроссовок, а не конкретную модель -->

Давайте запомним: контекст страницы важнее буквальной детализации изображения.

Не начинайте alt со слова «картинка» или «изображение»

Экранный читатель и так объявит, что это изображение. Нет смысла дублировать:

Плохо:

<img src="cat.jpg" alt="Изображение кота на диване">

Лучше:

<img src="cat.jpg" alt="Серый кот спит на синем диване">

Так текст короче и информативнее.

Будьте конкретны, но не перегружайте деталями

Хороший alt:

• достаточно точен;
• не превращается в длинный абзац.

Пример:

<img src="diagram.png" alt="Диаграмма, показывающая снижение времени отклика сервера с 500 до 120 миллисекунд после оптимизации">

Смотрите, я не расписываю каждую подпись на оси, но передаю основную идею диаграммы.

Неподходящий вариант:

<img src="diagram.png" alt="Диаграмма с зеленой и синей линиями на белом фоне">
<!-- Смысла почти нет -->

Когда нужен длинный текст вместо alt

Если у вас сложная инфографика, схема или таблица в виде изображения, alt физически не может вместить все, что нужно передать. В этом случае:

1. В alt даем краткое резюме.
2. Под (или рядом) с изображением размещаем подробное текстовое описание.

Пример:

<img src="complex-diagram.png" alt="Схема архитектуры микросервисов компании. Подробное описание приведено ниже">
<!-- Краткое содержание -->
<p>
  Схема показывает три микросервиса заказов, оплаты и уведомлений.
  Все они взаимодействуют через брокер сообщений RabbitMQ...
</p>
<!-- Здесь развернуто объясняем архитектуру -->

Так вы и доступность обеспечиваете, и не перегружаете атрибут alt.

---

Типовые случаи: как формулировать alt на практике

Фотографии людей

Фотографии людей обычно описываем по задаче:

1. Фото автора, спикера, участника:

<img src="speaker.jpg" alt="Докладчик Иван Смирнов на конференции FrontendConf 2024">

2. Групповые фотографии:

<img src="team.jpg" alt="Команда отдела разработки из шести человек в офисе компании">

3. Если важен не человек, а контекст:

<img src="remote-work.jpg" alt="Сотрудник работает за ноутбуком из дома, сидя на диване">

Товары в интернет-магазине

Здесь alt часто совпадает с названием товара, но не всегда:

<img src="iphone-15-blue.jpg" alt="Смартфон iPhone 15 128 ГБ синий">
<!-- Модель, объем памяти, цвет -->

Если основная информация уже есть в заголовке рядом, alt можно сделать чуть проще, но не пустым:

<h2>iPhone 15 128 ГБ синий</h2>
<img src="iphone-15-blue.jpg" alt="iPhone 15 синий">

Смотрите, я сохраняю смысл, но убираю дублирование объема памяти.

Скриншоты интерфейсов

Скриншоты не обязательно описывать по пикселям. Лучше передать, что пользователь увидит или сможет сделать:

<img src="settings-screen.png" alt="Экран настроек профиля с полями имя, email и кнопкой сохранения">

Если важна конкретная ошибка на скриншоте:

<img src="error-404-screen.png" alt="Страница ошибки 404 с сообщением Страница не найдена и кнопкой На главную">

Формулы и графики

Если формула одна и не слишком сложная, alt можно сделать как текст формулы:

<img src="formula1.png" alt="E равно mc в квадрате">

Для сложных формул лучше использовать текстовые форматы (например, MathML или рендеринг LaTeX в текст), а изображение использовать только как визуальное дополнение.

Графики — как мы уже обсуждали — описываем по сути:

<img src="temperature-chart.png" alt="График показывает рост средней температуры в городе с 10 до 25 градусов в течение недели">

---

Частые ошибки при работе с alt и как их исправить

Ошибка 1. Вообще отсутствует alt

<img src="banner.jpg">
<!-- Нет alt - экранный читатель может озвучить только имя файла или пропустить -->

Решение:

• Всегда добавляйте alt.
• Если баннер несет смысл — описывайте его.
• Если баннер чисто декоративный — ставьте пустой alt.

Пример:

<img src="banner.jpg" alt="Скидка 30 процентов на зимнюю коллекцию до 15 января">

Ошибка 2. Бессмысленный или технический alt

Примеры неудачных вариантов:

<img src="img12345.png" alt="img12345">
<img src="icon.png" alt="icon">
<img src="photo.png" alt="image">

Здесь alt просто дублирует имя файла и бесполезен для пользователя. Лучше переформулировать по смыслу:

<img src="img12345.png" alt="Панель аналитики с графиком и показателями конверсии">

Ошибка 3. Дублирование текста на странице

Если рядом с изображением уже есть текст, полностью дублирующий alt, это может привести к удвоенному чтению экранным читателем.

Плохо:

<img src="paid-icon.svg" alt="Оплачено">
<span>Оплачено</span>
<!-- Пользователь с экранным читателем услышит "Оплачено Оплачено" -->

Решение:

• Либо убираем alt и оставляем текст;
• Либо делаем alt пустым, если текст уже есть.

<img src="paid-icon.svg" alt="">
<span>Оплачено</span>

Ошибка 4. Слишком длинные описания в alt

Иногда разработчики пытаются уместить все детали в alt, особенно для сложных изображений.

<img src="complex-graph.png" alt="График с тремя линиями, где зеленая линия показывает... (еще 2-3 предложения)">

Решение:

• Дайте краткое резюме в alt.
• Подробности вынесите в текст рядом.

<img src="complex-graph.png" alt="Сравнение производительности трех алгоритмов сортировки">
<p>На графике показана производительность пузырьковой сортировки, быстрой сортировки и пирамидальной сортировки...</p>

Ошибка 5. alt на языках, отличных от языка страницы

Если страница на русском, alt тоже должен быть на русском, если только это не имя бренда или специально сохраненное оригинальное название.

Нежелательно:

<img src="menu.png" alt="Settings menu screenshot">

Лучше:

<img src="menu.png" alt="Скриншот меню настроек">

---

Проверка alt с помощью экранных читателей и инструментов

Как протестировать alt «глазами» пользователя

Есть простой прием: попробуйте пройтись по странице, представив, что вы не видите картинки. Задайте себе вопросы:

• Понимаете ли вы, что происходит, не глядя на изображения?
• Достаточно ли текста alt, чтобы не потерять смысл?
• Нет ли раздражающего набора «декоративной» информации?

Можно включить режим без загрузки картинок в браузере и посмотреть, где появляются alt.

Использование экранных читателей

Если вы разрабатываете интерфейсы с прицелом на доступность, имеет смысл хотя бы изредка запускать экранный читатель и проверять поведение:

• Windows — NVDA или JAWS;
• macOS — VoiceOver;
• iOS — VoiceOver (в настройках универсального доступа);
• Android — TalkBack.

Вы можете пройтись по странице с клавиатуры и послушать, что зачитывается на месте изображений. Так вы сразу поймете, где alt перегружен, где его не хватает, а где он лишний.

Автоматические проверки и линтеры

Существуют инструменты, которые помогают автоматизировать проверку alt:

• линтеры для шаблонов (например, eslint-plugin-jsx-a11y для React);
• валидаторы HTML;
• расширения для браузера вроде Axe или Lighthouse.

Они обычно проверяют:

• наличие атрибута alt;
• пустой alt у декоративных картинок;
• отсутствие alt у изображений-ссылок (это ошибка).

---

alt и другие атрибуты: title, aria-label и не только

alt vs title

Иногда разработчики путают alt и title или пытаются использовать только title вместо alt.

Пример:

<img src="photo.jpg" title="Пейзаж на закате">
<!-- Экранный читатель может игнорировать title, а alt здесь отсутствует -->

Разница:

• alt — обязателен для доступности, зачитывается всегда;
• title — необязателен, часто показывается только как всплывающая подсказка при наведении курсора, а экранные читатели могут его игнорировать или обрабатывать по-своему.

Правильный подход:

<img src="photo.jpg" alt="Пейзаж с горами на закате">
<!-- Обычно достаточно alt, title не нужен -->

Title используется редко и, как правило, не для замены alt.

alt и aria-label

Для самого изображения атрибут aria-label обычно не нужен, потому что alt уже выполняет его роль.

Тем не менее aria-label может использоваться для обертки, если изображение само без alt:

<button type="button" aria-label="Закрыть">
  <img src="close.svg" alt="">
  <!-- Иконка чисто декоративная, действие описывает aria-label у кнопки -->
</button>

Здесь aria-label относится к кнопке, а alt пустой, потому что иконка не несет отдельного смысла.

---

alt в современных фреймворках и шаблонизаторах

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

Пример в React

// Компонент карточки товара
function ProductCard({ product }) {
  return (
    <article className="product-card">
      <img
        src={product.imageUrl}
        alt={product.altText} // Здесь мы передаем alt из данных
      />
      <h2>{product.name}</h2>
      <p>{product.price} ₽</p>
    </article>
  );
}

Комментарии:

• Здесь altText стоит хранить в данных, а не вычислять на лету в компоненте.
• Если товар всегда отображается с названием, можно в alt подставлять product.name.

Пример с условием для декоративных картинок:

function Icon({ type }) {
  const src = `/icons/${type}.svg`;

  return <img src={src} alt="" aria-hidden="true" />;
  // alt пустой, а aria-hidden подсказывает ассистивным технологиям игнорировать элемент
}

Пример в шаблонизаторе (например, Handlebars или Twig)

<img src="{{ product.imageUrl }}" alt="{{ product.alt }}">
<!-- Здесь вы заранее задаете alt для каждого товара в CMS -->

Важно: если alt приходит из CMS, редакторам контента нужно объяснить правила его заполнения. Без этого вместо осмысленных описаний появятся «фото1», «картинка2» и так далее.

---

Краткие чек-листы по alt для разных типов проектов

Лендинги и промо-сайты

• Логотипы: alt с названием компании или пустой, если рядом есть текст с названием.
• Баннеры: alt описывает оффер (скидка, акция, дата мероприятия).
• Фоны и декоративные элементы: alt пустой.
• Ключевые иллюстрации секций: alt описывает суть блока.

Интернет-магазины

• Фото товаров: alt с названием и ключевыми характеристиками.
• Иконки статусов: alt или пустой alt + текст рядом.
• Баннеры акций: alt с конкретным предложением.
• Логотипы брендов: alt с названием бренда, если это важно пользователю.

Документация и статьи

• Скриншоты: alt кратко описывает то, что должен увидеть пользователь.
• Диаграммы и графики: alt с краткой интерпретацией результата.
• Сложные визуализации: краткий alt + подробное текстовое описание рядом.

---

Атрибут alt — это не просто «проходной» параметр, который нужно заполнить, чтобы валидатор не ругался. Это часть пользовательского опыта и доступности. Если вы начнете относиться к alt так же внимательно, как к основному тексту и заголовкам, выиграют все пользователи: и те, кто пользуется экранными читателями, и те, у кого не всегда стабильный интернет, и даже те, кто приходит из поиска по картинкам.

---

Частозадаваемые технические вопросы по теме и ответы

Как поступать с изображениями, которые загружаются динамически через CSS background-image

Экранные читатели не видят background-image как содержимое. Если изображение важно по смыслу, его нельзя прятать в CSS. Решение

1. Вынести значимое изображение в тег img с alt.
2. Оставить background-image только для декоративных фонов и в этом случае не пытаться добавлять к ним alt.

Что делать, если одно и то же изображение используется в разных местах с разным контекстом

Можно использовать один и тот же файл src, но задавать разные alt в разных местах. Атрибут alt относится к конкретному элементу img, а не к файлу. В компонентах и шаблонах передавайте alt как параметр, а не «зашивайте» его в путь к картинке.

Как правильно обрабатывать alt в компонентах, если значение приходит от пользователя или из CMS

1. Валидация на стороне админки – не допускать пустых alt там, где они обязательны.
2. В интерфейсе редактирования дайте подсказки и примеры хороших alt.
3. В коде не подставляйте автоматически имя файла как alt – лучше оставить alt пустым и отметить проблему, чем озвучивать пользователю бессмысленный текст.

Как быть с SVG иконками – нужен ли alt

Для встроенного SVG через тег svg атрибут alt не используется. Вместо этого

1. Если иконка смысловая – добавьте атрибут role="img" и внутри тег title с описанием.
2. Если иконка декоративная – добавьте aria-hidden="true" и не дублируйте ее текстом.
   Для SVG, подключаемого через img, alt работает так же, как и для обычных картинок.

Можно ли генерировать alt автоматически с помощью нейросетей

Технически можно, но полностью полагаться на автоматическую генерацию не стоит. Нейросеть видит только картинку, а не контекст страницы. Лучше использовать автогенерацию как подсказку для редактора, который проверит и при необходимости переформулирует alt под конкретную задачу и окружение.