Атрибут alt тега <img>
Описание
Атрибут alt задаёт альтернативный текст для элемента <img>. Этот текст отображается, если изображение не может быть загружено, а также используется программами чтения с экрана для описания изображения пользователям с нарушениями зрения.
<img
src="logo.png"
alt="Логотип компании ExampleCorp - синий круг с белой буквой E"
width="200">
Когда и как использовать:
| Тип изображения | Пример alt-текста | Рекомендации |
|---|---|---|
| Информативное | alt="График роста продаж за 2025 год" |
Опишите содержание и функцию изображения |
| Декоративное | alt="" |
Пустое значение для чисто декоративных изображений |
| Функциональное | alt="Поиск" (для кнопки поиска) |
Опишите действие, а не внешний вид |
| Комплексное | alt="Карта расположения офисов" + текстовое описание рядом |
Краткое описание + детали в окружающем тексте |
Лучшие практики:
<!-- Плохо: избыточный или бесполезный alt -->
<img src="decorative-border.png" alt="Декоративная граница">
<!-- Хорошо: декоративное изображение -->
<img src="decorative-border.png" alt="" role="presentation">
<!-- Хорошо: информативное изображение -->
<img src="chart.png" alt="Рост продаж на 25% в 3 квартале">
<!-- Хорошо: функциональное изображение -->
<a href="/search"><img src="search-icon.png" alt="Поиск"></a>
Доступность и SEO:
- Атрибут alt обязателен для валидного HTML
- Помогает поисковым системам понимать содержание изображений
- Не начинайте текст с "Изображение..." - скринридеры и так объявляют это
- Держите описание кратким (до 125 символов)
Пример с комплексным контентом:
<figure>
<img
src="office-map.jpg"
alt="Схема расположения офиса в бизнес-центре 'Плаза'">
<figcaption>
Бизнес-центр "Плаза", 3 этаж, офис 310.
Вход через центральный холл, лифт справа.
</figcaption>
</figure>
Ошибки, которых следует избегать:
<!-- Плохо: отсутствует alt -->
<img src="important-chart.png">
<!-- Плохо: избыточная информация -->
<img src="photo.jpg" alt="Фотография человека, который стоит у дерева...">
<!-- Плохо: ключевые слова вместо описания -->
<img src="product.jpg" alt="купить дешево недорого скидки">
Проверка доступности:
- Отключите изображения в браузере - текст должен сохранять смысл
- Проверьте с помощью скринридера (NVDA, VoiceOver)
- Используйте валидаторы (WAVE, axe DevTools)
- Убедитесь, что декоративные изображения имеют alt=""
Примечание: Правильное использование атрибута alt - это не только требование стандартов доступности WCAG, но и возможность улучшить пользовательский опыт для всех посетителей вашего сайта, независимо от их возможностей или условий просмотра.