Атрибуты alt и title

alt — обязательная текстовая альтернатива для изображений; title — вспомогательная подсказка (tooltip) для любых элементов, появляющаяся при наведении курсора.

Зачем нужно

alt критичен для a11y и SEO: screen reader зачитывает его вслух, а поисковики используют для индексации изображений. title часто путают с alt, но у них принципиально разные роли. title не является заменой alt и не решает задачи доступности — screen readers воспроизводят его непоследовательно, а на мобильных устройствах tooltip физически недоступен (нет hover).

Где используется

  • alt — <img>, <area> (в image maps), <input type="image">
  • title — любой HTML-элемент: ссылки, кнопки, сокращения, поля формы
  • <abbr title="..."> — стандартный случай применения title

Атрибут alt

Правила написания подробно в alt текст -- лучшие практики.

<!-- Информационное изображение -->
<img src="diagram.png" alt="Схема взаимодействия клиента и сервера через REST API">

<!-- Декоративное — пустой alt -->
<img src="divider.svg" alt="">

<!-- Функциональное (кнопка/ссылка) — описывает действие -->
<a href="/">
  <img src="logo.png" alt="На главную">
</a>

<!-- Без alt — невалидный HTML -->
<!-- <img src="photo.jpg"> — НЕПРАВИЛЬНО -->

Атрибут title

<!-- Tooltip на аббревиатуре — правильное использование -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- Дополнительная информация к ссылке -->
<a href="/report.pdf" title="Отчёт за 2025 год (PDF, 2 МБ)">Скачать отчёт</a>

<!-- Tooltip на изображении — НЕ замена alt -->
<img src="photo.jpg" alt="Портрет Ивана Иванова" title="Иван Иванов, генеральный директор">

Сравнение alt и title

Критерий alt title
Обязателен для <img> Да (требование HTML) Нет
Screen reader Читается всегда Непоследовательно
Мобильные устройства Работает Tooltip недоступен (нет hover)
SEO для изображений Да Нет
Заменяет другой атрибут — Не заменяет alt
Применение Только <img>, <area>, <input type="image"> Любой элемент

Когда title полезен, а когда нет

Полезен:

  • <abbr title="..."> — расшифровка аббревиатуры
  • Ссылка на файл — тип и размер файла
  • Поле формы — дополнительная подсказка (но не вместо <label>)

Бесполезен:

  • Как замена alt на изображениях
  • На мобильных (нет hover-состояния)
  • Для передачи важной информации (не будет прочитан screen reader)

Частые ошибки

Ошибка Почему плохо Как правильно
title вместо alt на <img> Screen reader не читает title стабильно Всегда указывай alt
alt и title с одинаковым текстом Screen reader дважды прочитает одно Если нужен title, пусть он добавляет информацию
alt отсутствует Невалидный HTML, плохая a11y alt обязателен всегда
title на важном контенте Недоступен без hover / на мобильных Выводи важную информацию видимым текстом

Связанные темы

Ресурсы