Alt-текст — текстовый эквивалент изображения. В HTML это атрибут alt у элемента img; по сути его задача — сохранить назначение картинки, когда читатель её не видит. Программа чтения с экрана (скринридер) может его озвучить, текстовый режим или медленное соединение — показать, а поисковые системы могут использовать его вместе с окружающей страницей, чтобы понять изображение. Это не поле для повторения целевого запроса или отдельного рычага ранжирования.
Назначение, а не ключевые слова
Одни и те же пиксели в разном контексте могут требовать разных альтернатив. Фото синей кружки в карточке товара может требовать названия товара, цвета и материала. В статье про офисные привычки полезным фактом может быть то, что кружка стоит рядом с блокнотом. Если фото только украшает абзац, где тот же факт уже указан, правильная альтернатива может быть пустой: alt="". Рекомендации W3C по изображениям различают их по назначению: информативные картинки описывают важную информацию, функциональные — действие или адрес назначения, а декоративные получают пустую альтернативу (null).
- Информативное изображение
- Назовите информацию, которую читатель иначе пропустит: «Синяя керамическая кружка рядом с блокнотом на столе».
- Функциональное изображение
- Назовите действие или адрес назначения: «Открыть оформление заказа» полезнее, чем «иконка корзины».
- Декоративное изображение
- Используйте alt="", если оно не добавляет информации и не является интерактивным элементом управления.
- Сложная диаграмма или схема
- Дайте короткое резюме в alt, а выводы, подписи и данные вынесите в соседний текст или связанное описание.
Выбираем подходящую альтернативу
Начните с главного сообщения страницы, а потом решите, какую роль играет картинка. Так вы не опишете красивую деталь и не пропустите факт, без которого страница непонятна. Для диаграммы подпись вроде «Ежемесячные регистрации» обычно мало: в тексте также нужно назвать тренд и значения, которые важны. Для картинки-ссылки Google документирует, что её alt используется как анкорный текст, поэтому альтернатива должна передавать адрес назначения или действие. Декоративная картинка внутри ссылки — другой случай: у ссылки всё равно должно быть доступное имя из видимого текста или другой надёжной метки.
| Использование изображения | Полезная альтернатива | Чего избегать |
|---|---|---|
| Фото товара | Конкретный товар, отличающий вариант и видимое состояние | Рекламный слоган или повторяющийся коммерческий запрос |
| Кнопка с иконкой | Действие, например «Скачать отчёт» | «Синяя стрелка» |
| Диаграмма | Краткий вывод и рядом текст с полными данными | Длинная серия значений, втиснутая в alt |
| Декоративный разделитель | Пустой атрибут alt | Имя файла или общее слово «декорация» |
Пишем и проверяем alt-текст
Пишите альтернативу, когда картинка уже стоит рядом с финальным текстом. Делайте её достаточно короткой, чтобы её можно было услышать как часть предложения, ставьте ключевое различие в начало и используйте термины, которые читатель и так видит на странице, если они уместны. Не задавайте универсальный лимит символов: иконке может хватить двух слов, а фото товара — короткого предложения. Если понятие нельзя выразить кратко, вынесите более длинное объяснение в видимое содержимое страницы.
- Определите тип картинки в её финальном контексте: информативная, функциональная, сложная или декоративная.
- Составьте самую короткую фразу, которая сохраняет назначение; уберите «изображение с» и любые обороты, которые ничего не добавляют.
- Сравните альтернативу с подписью, заголовком и соседним текстом: она не должна противоречить им и не должна их просто повторять.
- Проверьте отрисованный HTML: нужен элемент img с нужным значением alt. URL картинки и заголовок медиафайла в CMS не заменяют alt.
- Для типового шаблона послушайте страницу программой чтения с экрана или проверьте дерево доступности, затем выборочно проверьте повторяющиеся компоненты и случаи с отсутствующей картинкой.
Отделяю изображение, которое несёт смысл, от декорации, а затем пишу alt по смыслу, не втискивая туда имя файла или ключевые слова. Это метод проверки, а не доказательство, что каждая картинка на сайте доступна: полная проверка также смотрит отрисованные шаблоны, картинки-ссылки и редакционные процессы.
Ограничения и частые ошибки
Alt-текст помогает доступности и даёт поисковым системам релевантную подсказку, но он не исправит недоступный элемент управления, заблокированную картинку, нерелевантный текст страницы или отсутствие текстового объяснения сложной визуализации. Google учитывает контекст страницы, подписи и другие сигналы, а не только alt. Проверяйте обнаружение картинок и качество страницы, на которую они ведут, как отдельные вещи.
- Не используйте имя файла, заголовок из CMS или список ключевых слов как альтернативу.
- Не считайте, что любой непустой alt лучше: декоративные картинки обычно нужно пропускать через alt="".
- Не переносите в alt юридические формулировки, данные или призыв к действию, которых нет нигде больше на странице.
- Не используйте одну и ту же общую альтернативу для разных товарных фото только потому, что шаблон это позволяет.
- Не утверждайте, что alt-текст гарантирует позиции в вебе, попадание картинок в выдачу или результат соответствия требованиям доступности.