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 и SEO: коротко и по делу

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

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

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

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

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

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

<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>

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

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

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

Итог

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

Источник