Что такое alt у изображения?

Атрибут alt у изображений: назначение и важность

Атрибут alt (от английского alternative text) — это обязательный HTML-атрибут для элементов <img>, который предоставляет текстовое описание изображения. Его основная задача — быть текстовой альтернативой визуальному контенту, когда изображение не может быть отображено или воспринято пользователем. Это ключевой элемент доступности (accessibility) и SEO.

Основные функции атрибута alt

• Доступность для людей с ограниченными возможностями: Для пользователей, использующих скринридеры (screen readers — программы, озвучивающие содержимое страницы), текст alt заменяет изображение. Это позволяет понять содержание картинки людям с нарушениями зрения.
• Запасной вариант при проблемах загрузки: Если изображение не загрузилось (из-за ошибки в ссылке, медленного соединения или если пользователь блокирует картинки), браузер отобразит текст из alt в качестве заместителя.
• SEO (Search Engine Optimization): Поисковые системы используют текст alt для понимания содержания изображения и контекста страницы. Правильно заполненный атрибут может улучшить позиции сайта в поиске по изображениям и общему рейтингу.
• Улучшение пользовательского опыта: В некоторых ситуациях (например, при предзагрузке) текст может отображаться до того, как картинка загрузится, давая пользователю представление о содержании.

Правила написания качественного текста alt

Текст должен быть корректным, кратким и информативным. Основные принципы:

• Описание функции изображения: Что изображение делает на странице, а не только что показывает. Например, для кнопки «Поиск» с иконкой лупы: alt="Поиск".
• Избегание лишних слов: Не начинайте с «Изображение…» или «Картинка…». Скринридеры уже объявляют элемент как изображение.
• Контекстуальность: Описание должно соответствовать окружающему контенту. alt для декоративного изображения может быть пустым (alt=""), но атрибут должен присутствовать.

Примеры использования в коде

<!-- Информативное изображение (фотография продукта) -->
<img src="iphone-15.jpg" alt="Смартфон Apple iPhone 15 черного цвета на белом фоне">

<!-- Функциональное изображение (иконка действия) -->
<img src="icon-download.svg" alt="Скачать документ" class="action-icon">

<!-- Декоративное изображение (визуальный элемент без смысловой нагрузки) -->
<img src="decorative-border.png" alt="" class="decoration">
<!-- Пустой alt указывает скринридерам игнорировать этот элемент -->

<!-- Изображение как часть ссылки -->
<a href="/blog">
  <img src="blog-banner.jpg" alt="Перейти в раздел Блог с последними статьями">
</a>

Частые ошибки и лучшие практики

• Ошибка: Использование слишком длинных текстов (например, полных описаний для галерей). Для сложных изображений (графики, инфографики) лучше предоставить подробное описание в тексте рядом с изображением или использовать атрибут longdesc (хотя его поддержка ограничена).
• Ошибка: Полное отсутствие атрибута alt. Это создает барьер для доступности и может негативно повлиять на SEO.
• Ошибка: Использование одинакового или нерелевантного текста для всех изображений на странице (например, alt="image").
• Лучшая практика: Для CSS-изображений (фон через background-image) текстовую альтернативу нужно предоставлять в HTML-контенте этого элемента, так как атрибут alt для них недоступен.
• Лучшая практика: Регулярное тестирование с скринридерами (NVDA, JAWS, VoiceOver) и инструментами аудита доступности (например, Lighthouse в Chrome DevTools) для проверки качества alt-текстов.

Атрибут alt в современных фреймворках

В React, Vue или Angular при работе с компонентами атрибут alt передается как обычный проп или атрибут.

// Пример в React
function ProductImage({ src, description }) {
  return <img src={src} alt={`Фотография продукта: ${description}`} />;
}

Использование корректного атрибута alt — это не просто техническое требование, а базовая часть ответственного веб-разработки, которая делает интернет более инклюзивным и эффективным для всех пользователей и систем.