Альтернативные тексты и медиа: роль атрибута alt, longdesc, и способы описания картинок

Зачем нужны альтернативные тексты? 🌍

Картинки делают контент живым, но что, если их нельзя увидеть? Альтернативные тексты — это мостик между визуальной информацией и теми, кто использует скринридеры, имеет медленное соединение или просто отключил загрузку изображений. Вот как они работают:

<img src="cat.jpg" alt="Рыжий кот сидит на подоконнике">

Здесь alt — это краткое описание, которое: - Помогает поисковым системам понять содержание картинки (SEO-оптимизация). - Озвучивается скринридерами для незрячих пользователей. - Отображается, если изображение не загрузилось.

Атрибут alt: правила хорошего тона ✨

1. Будьте конкретны, но лаконичны:

<!-- Плохо: -->
<img src="chart.png" alt="График">

<!-- Хорошо: -->
<img src="chart.png" alt="График роста продаж за 2023 год">

2. Для декоративных элементов (разделители, иконки) используйте пустой alt:

<img src="divider.png" alt="">

3. Избегайте «картинка», «изображение» — это и так понятно из контекста.

Когда alt недостаточно? Вводим longdesc 📜

Если описание сложное (например, инфографика), поможет атрибут longdesc — он ссылается на отдельную страницу с подробным текстом:

<img src="infographic.png" alt="Диаграмма этапов проекта" longdesc="infographic-desc.html">

👉 Важно: longdesc поддерживается не всеми скринридерами, поэтому дублируйте описание в подписи или рядом с изображением.

Альтернативные способы описания 🎨

1. Подписи (<figure> + <figcaption>)

Идеально для фотографий, иллюстраций:

<figure>
  <img src="sunset.jpg" alt="Закат над горами">
  <figcaption>Закат в Альпах, фото сделано 15 июня 2023 года</figcaption>
</figure>

2. ARIA-атрибуты

Для динамического контента (например, SVG):

<svg aria-label="График температуры за месяц">...</svg>

Практика: разберём реальный кейс 🔍

Задача: Описать мем с котом и надписью «Monday Mood».

<!-- Плохо: -->
<img src="meme.jpg" alt="Мем">

<!-- Хорошо: -->
<img src="meme.jpg" alt="Кот лежит на столе с грустным лицом. Текст: 'Monday Mood'">

<!-- Идеально (если нужен контекст): -->
<figure>
  <img src="meme.jpg" alt="Кот лежит на столе с грустным лицом">
  <figcaption>Мем «Monday Mood»: кот выражает всеобщую усталость от понедельника</figcaption>
</figure>

Итоги: чек-лист для профессионала ✅

1. Всегда добавляйте alt, даже если он пустой (для декоративных элементов).
2. Для сложных изображений используйте longdesc или <figcaption>.
3. Тестируйте с скринридерами (например, NVDA или VoiceOver).
4. Избегайте дублирования информации — alt и подпись должны дополнять друг друга.