alt текст: лучшие практики

Атрибут alt у элемента <img> содержит текстовую альтернативу изображению для screen readers, поисковых систем и случаев, когда изображение не загрузилось.

Зачем нужно

Alt-текст — ключевой элемент web accessibility (a11y): screen reader зачитывает его вслух вместо изображения. Без корректного alt незрячие пользователи не получают смысл контента. Кроме этого, поисковые системы используют alt для понимания содержимого изображения, что важно для image SEO.

Где используется

Все элементы <img> в HTML-документах
Иконки и иллюстрации в UI-компонентах
Изображения в письмах (email HTML)
Иллюстративные и смысловые картинки в статьях

Правила написания alt

Информационное изображение

Alt описывает то, что важно на картинке — смысл, а не форму:

<!-- Плохо: описывает форму, а не смысл -->
<img src="chart.png" alt="График">

<!-- Хорошо: передаёт информацию -->
<img src="chart.png" alt="Рост продаж на 40% в 2025 году по сравнению с 2024-м">

Декоративное изображение — пустой alt

Если изображение чисто декоративное и не несёт смысла, используй alt="". Screen reader пропустит его:

<!-- Декоративное изображение фона -->
<img src="decorative-wave.svg" alt="">

<!-- Иконка рядом с текстом — смысл передаёт текст, alt пустой -->
<button>
  <img src="icon-save.svg" alt="">
  Сохранить
</button>

Функциональное изображение (кнопка, ссылка)

Alt описывает действие, а не внешний вид:

<!-- Логотип-ссылка -->
<a href="/">
  <img src="logo.svg" alt="На главную страницу">
</a>

<!-- Иконка-кнопка без текста -->
<button>
  <img src="icon-close.svg" alt="Закрыть диалог">
</button>

Сложные изображения (диаграммы, схемы)

<!-- Краткий alt + развёрнутое описание рядом -->
<figure>
  <img src="architecture.png" alt="Схема микросервисной архитектуры">
  <figcaption>
    Схема показывает взаимодействие трёх сервисов: Auth, API Gateway и Database.
  </figcaption>
</figure>

<!-- Или через aria-describedby -->
<img src="complex-chart.png"
     alt="Квартальная динамика выручки 2025"
     aria-describedby="chart-desc">
<p id="chart-desc">Q1: 1.2М, Q2: 1.5М, Q3: 1.8М, Q4: 2.1М рублей.</p>

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

Ошибка	Почему плохо	Как правильно
Отсутствие атрибута `alt`	Невалидный HTML; screen reader зачитает имя файла	Всегда указывай `alt`, даже `alt=""`
`alt="image"`, `alt="фото"`	Бесполезная информация	Описывай содержимое
Дублирование подписи в alt	Screen reader дважды произносит одно и то же	Если есть `<figcaption>`, alt можно сократить
`alt` у декоративных изображений	Screen reader прерывается на ненужный текст	Используй `alt=""` для декора
Слишком длинный alt (> 150 символов)	Громоздко для screen reader	Кратко + `aria-describedby` для деталей