Вебсправочник
Основы веб-разработки

Как писать alt для изображений

Выбираем описание по назначению изображения и не превращаем alt в список ключевых слов.

Зачем это нужно

Alt заменяет смысл изображения в конкретном контексте. Одна и та же фотография может требовать разного описания в учебной статье, карточке товара или декоративной обложке. Вопрос не «что вообще нарисовано», а «какую информацию потеряет читатель без картинки».

Определите роль изображения

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

Учтите действие и подпись

Если картинка — единственное содержимое ссылки, описание должно помогать понять назначение перехода. Подпись figcaption может давать дополнительный контекст; не обязательно повторять её целиком в alt.

Для сложной схемы дайте объяснение

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

Важное ограничение

Не пытайтесь улучшить SEO перечислением запросов в alt. Оно затрудняет понимание и не заменяет качественное описание.

Контрольная проверка

  • Роль изображения понятна.
  • Декоративные картинки не создают лишнего чтения.
  • У изображения-ссылки понятно действие.
  • Сложная схема объяснена в доступном текстовом виде.

Продолжить изучение: img, figure.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.