ALT: что это

Основные цели использования

1. Доступность (accessibility)
   • Пользователи со слабым зрением или полностью незрячие пользуются экранными читалками (screen readers). Они читают alt-текст вслух, чтобы описать картинку.
   • Если изображение информативно (например, схема или график), отсутствие подписи делает контент недоступным.
2. SEO (поисковая оптимизация)
   • Поисковые роботы «видят» изображения через текст в alt. Правильно составленный alt помогает лучше ранжировать страницу по тематическим запросам.
3. Резервный текст
   • Если картинка не загрузилась (проблемы с сетью или ошибочный путь в src), вместо неё будет показан именно alt-текст.

Синтаксис и правила формирования

• Обязателен для всех <img>, кроме декоративных (см. ниже).
• Текст должен быть коротким, но ёмким: 5–15 слов достаточно в большинстве случаев.
• Избегайте слов «изображение», «картинка», «фото» — экранные читалки уже знают, что это картинка.
• Если картинка чисто декоративная и не несёт смысловой нагрузки, используйте пустой alt=»». Тогда screen reader пропустит её.

<!— Декоративная иконка без смысла —>

<img src=»icon-decor.svg» alt=»»>

Лучшие практики

• Конкретность

<!— Плохо: —>

<img src=»chart.png» alt=»График»>

<!— Хорошо: —>

<img src=»chart.png» alt=»Рост продаж в 2024 году по кварталам»>

• Уникальность
  

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

• Ключевые слова
  

Включайте одно-два ключевых слова, релевантных теме страницы, без переспама.

• Контекст
  

Описывайте то, что важно для понимания содержания страницы.

Примеры использования в блоге о строительстве

• <!— Иконка декоративная — пропускаем —>

<img src=»brush-icon.svg» alt=»»>

• <!— Фотография готового фасада, важная для понимания —>

<img src=»facade.jpg» alt=»Отделка фасада декоративной штукатуркой под кирпич»>

• <!— Инфографика, несущая информацию —>

<img src=»insulation-chart.png» alt=»Сравнительная таблица теплопроводности материалов для утепления»>

Распространённые ошибки

• Отсутствие атрибута

<!— Некорректно —>

<img src=»door.jpg»>

• Дублирование названия файла

<!— Плохо —>

<img src=»door.jpg» alt=»door.jpg»>

• Слишком длинный текст

<!— Плохо: полное макроописание —>

<img src=»window.png» alt=»Зелёное пластиковое окно со стеклопакетом, серой рамой и москитной сеткой, установленное на втором этаже дома в загородном поселке»>

Проверка и валидация

• Валидатор W3C (https://validator.w3.org/) обнаружит отсутствие alt у <img>.
• Плагины для IDE (VSCode, WebStorm) и линтеры (ESLint + плагин HTML) помогут соблюдать правила.

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