alt у картинок отсутствует

Симптом

• В HTML‑коде изображения имеют тег <img> без атрибута alt.
• В инспекторе браузера виден <img src="…"> без alt.
• Поисковый запрос «alt отсутствует картинки» приводит к ошибкам в отчётах о доступности.
• Пользователи с отключёнными изображениями видят пустое место вместо картинки.
• Сайт получает низкий балл в инструментах Google Lighthouse и PageSpeed Insights.

Причина

• При генерации шаблонов или CMS‑плагинах иногда забывают добавить alt.
• Автоматическое копирование изображений из внешних источников без указания описания.
• Использование alt="" вместо реального текста, что считается отсутствием атрибута.
• Ошибка в конфигурации шаблона, где переменная {{ image.alt }} пуста.

Как проверить

1. Проверка вручную
   bash grep -R '<img' . | grep -v 'alt=' Вывод покажет строки <img> без alt.

2. Проверка доступности
   - Запустите Lighthouse в Chrome DevTools → вкладка Audits → Accessibility.
   - В отчёте найдите раздел «Images without alt text».

3. Проверка с помощью W3C Validator
   bash curl -s https://validator.w3.org/nu/?out=json -d file=@index.html | jq '.messages[] | select(.type=="error") | .message' Ошибки «Missing alt attribute on image» будут отображены.

Решение

1. Добавьте описательный alt
   html <img src="photo.jpg" alt="Портрет улыбающейся женщины в летнем платье"> - Текст должен быть коротким (≤125 символов).
   - Описывайте содержимое, а не форму: «логотип» → «Логотип компании X».

2. Используйте шаблоны
   В шаблонах (Twig, Blade, Handlebars) добавьте проверку:
   twig <img src="{{ image.url }}" alt="{{ image.alt | default(image.title | default('Изображение')) }}">
   Если image.alt пуст, будет использовано название изображения.

3. Автоматическая генерация alt
   При импорте изображений из CMS можно генерировать alt из названия файла:
   php function generateAlt($filename) { return ucwords(str_replace(['-', '_', '.jpg', '.png'], ' ', $filename)); }

4. Проверка после исправления
   - Перезапустите Lighthouse и убедитесь, что ошибок «Images without alt text» больше нет.
   - Проверьте, что в инспекторе виден атрибут alt со значением.

5. Обновление стилей
   Если изображения без alt создают пустое пространство, добавьте CSS‑правило:
   css img[alt=""] { display: none; }

Связанные

• Как добавить alt атрибуты в WordPress
• Проверка доступности изображений в Lighthouse