HTML атрибут alt у изображений: как писать альтернативный текст правильно (доступность и SEO)

Если вы верстаете страницы и используете картинки, вы обязаны уметь писать корректный атрибут alt. Это влияет на доступность (экранные дикторы), поисковые системы (изображения в поиске), а также на пользовательский опыт при ошибке загрузки. Ниже — практическое руководство для начинающих и продолжающих: простые правила, типовые кейсы и понятные примеры кода.

Что такое alt и зачем он нужен

alt — альтернативный текст изображения. Он читается скринридерами вместо картинки, показывается при ошибке загрузки и помогает поисковикам понять содержание. Главное правило: alt описывает СМЫСЛ или ФУНКЦИЮ изображения в конкретном контексте страницы.

Пять правил хорошего alt

1. Опишите смысл, а не пиксели: что изображение передаёт пользователю.
2. Краткость: обычно 5–15 слов достаточно.
3. Не пишите слова «изображение», «картинка» — скринридер и так объявит тип.
4. Для ссылок и кнопок опишите действие или цель, а не внешний вид иконки.
5. Для декоративных картинок используйте пустой alt (alt='').

Типовые сценарии и готовые примеры

1) Контентное фото в статье

Фото несёт смысл и помогает понять текст — пишем информативный alt.

<img src='img/espresso.jpg' alt='Двойной эспрессо с густой крема в белой чашке' width='800' height='600'>

Здесь важно не цвет чашки как таковой, а то, что это двойной эспрессо с характеристиками напитка.

2) Логотип в шапке

Логотип — это, по сути, название бренда. Если логотип — ссылка на главную, alt должен отражать цель ссылки.

<a href='/'>
  <img src='img/logo.svg' alt='Главная — CoffeeRoasters' width='120' height='32'>
</a>

Если логотип не является ссылкой, допустим вариант: alt='CoffeeRoasters'.

3) Декоративные изображения (иконки, разделители, узоры)

Они не несут смысл для контента и только украшают интерфейс. Используйте пустой alt и, по возможности, роль презентации.

<img src='img/divider.svg' alt='' role='presentation' width='200' height='16'>
<!-- Или скрыть иконку от ассистивных технологий: -->
<img src='icons/star.svg' alt='' aria-hidden='true' width='16' height='16'>

4) Изображение-ссылка (превью товара, баннер)

Альтернативный текст должен описывать цель перехода: куда ведёт ссылка или что пользователь получит по клику.

<a href='/product/espresso-pro'>
  <img src='img/espresso-pro.jpg' alt='Подробнее о кофемашине Espresso Pro' width='600' height='400'>
</a>

5) Сложные изображения: графики, схемы, инфографика

Краткий смысл — в alt, подробности — в подписи, описании рядом или по ссылке. Удобный паттерн: <figure><figcaption></figcaption></figure> и связь через aria-describedby.

<figure id='sales-fig'>
  <img src='img/sales-2025.png' alt='Динамика продаж за 2025 год: рост к декабрю' 
       aria-describedby='sales-desc' width='900' height='500'>
  <figcaption id='sales-desc'>
    Рост на 38% к декабрю за счёт новой линейки. Пики: март и ноябрь.
  </figcaption>
</figure>

6) Текст в картинке (нежелательно)

Если без текста в изображении никак, продублируйте его в alt. Ещё лучше — используйте реальный HTML-текст и стилизацию.

<img src='banners/sale.png' alt='Скидка 30% до 30 июня' width='1200' height='300'>

Чего делать нельзя (типичные ошибки)

• Пустой alt у значимого изображения — скринридер потеряет важный смысл.
• Переспам ключевыми словами: 'кофе, кофе, купить кофе' — это ухудшает UX и может навредить SEO.
• Дублировать подпись 1:1 в alt, если она уже рядом. Alt лучше делать более кратким или уточняющим.
• Писать визуальные детали без пользы: 'синяя кнопка с белой иконкой'. Если это кнопка, опишите действие: 'Добавить в корзину'.
• Оставлять alt по умолчанию из CMS вроде 'image123.jpg' — это бессмысленно для пользователя и поисковиков.

Alt и SEO: коротко и по делу

• Alt помогает поисковым системам понять содержание и ранжировать в разделе Картинки. Пишите естественно и по делу.
• Не злоупотребляйте ключами: 1 релевантная ключевая фраза в уместном предложении — нормально.
• Имя файла и окружение текста (заголовок, подпись, абзац) дополняют alt и усиливают семантику.
• Указывайте width и height — это снижает сдвиг макета (CLS) и косвенно улучшает опыт и метрики Core Web Vitals.
• Для изображений вне первого экрана используйте loading='lazy', но ключевые изображения выше сгиба грузите сразу.

<img src='products/grinder-x200.jpg' 
     alt='Кофемолка Grinder X200 для домашнего эспрессо' 
     width='800' height='600' loading='lazy'>

Мини‑шпаргалка по формулировкам

• Фото товара: 'Кружка из керамики 350 мл, цвет графит'
• Кнопка‑иконка корзины: alt не нужен, лучше текстовая кнопка или aria-label на кнопке
• Логотип‑ссылка: 'Главная — Название бренда'
• Баннер акции: 'Скидка 15% на капсулы до 10 августа'
• Декор/узор: alt=''

Проверка качества alt

Простой тест: закройте глаза и попросите кого‑то прочесть только alt — поймёте ли вы, что там? Ещё инструменты:

• Линтеры и плагины: axe DevTools, WAVE, Lighthouse (Accessibility).
• Скринридеры: NVDA (Windows), VoiceOver (macOS), TalkBack (Android).
• В браузере отключите изображения и проверьте читаемость страницы.

Готовые паттерны для проекта

Функциональная иконка внутри кнопки

<button type='button' aria-label='Открыть меню'>
  <img src='icons/menu.svg' alt='' aria-hidden='true' width='24' height='24'>
</button>

Здесь смысл задаёт aria-label у кнопки, а картинка декоративна и скрыта от ассистивных технологий.

Карточка товара с подписью и честным alt

<figure class='product'>
  <img src='img/mug-graphite.jpg' 
       alt='Кружка керамическая, 350 мл, графит' width='640' height='640'>
  <figcaption>Кружка Graphite 350 мл — устойчивое покрытие, подходит для ПММ</figcaption>
</figure>

Чек‑лист перед релизом

• У каждого значимого <img> есть осмысленный alt, у декоративных — пустой.
• Ссылки с картинкой описывают цель перехода в alt.
• Для сложных изображений есть <figcaption> или расширенное описание рядом, связанное aria-describedby.
• Нет переспама ключами, текст естественный и полезный человеку.
• Проставлены width и height, где возможно — loading='lazy' ниже первого экрана.

Где потренироваться и закрепить навык

Хотите быстро подтянуть навыки вёрстки, системно отработать семантику и доступность на реальных макетах? Рекомендую интенсив: Прокачать HTML/CSS на курсе «Вёрстка сайта с нуля 2.0» — практические задания и разборы.

Итог

Атрибут alt — маленькая деталь, которая сильно влияет на качество интерфейса. Следуя простым правилам и проверяя себя инструментами доступности, вы сделаете контент понятнее, а сайт — дружелюбнее к людям и поисковикам. Возьмите чек‑лист, внедрите паттерны из статьи — и ваш HTML станет профессиональнее уже сегодня.