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-атрибутов делает ваш блог более доступным, понятным и привлекательным для поисковых систем.