Alt-текст изображений

Происхождение и история термина

Атрибут ALT появился у элемента IMG уже в первой формальной спецификации языка — HTML 2.0 (RFC 1866, авторы Т. Бернерс-Ли и Д. Коннолли, ноябрь 1995 года). Там ALT описан как «text to use in place of the referenced image resource, for example due to processing constraints or user preference» — текст, который используется вместо изображения из-за технических ограничений или настроек пользователя ^[1]. Сейчас RFC 1866 имеет статус Historic и заменён RFC 2854 ^[1], но формулировка показывает исходный смысл атрибута: замена картинки там, где её нельзя или не хотят показывать.

Позже смысл сместился к доступности. В рекомендациях W3C по доступности веб-контента (WCAG) требование текстовых альтернатив стоит первым: критерий успеха 1.1.1 «Нетекстовый контент» уровня A требует, чтобы весь нетекстовый контент имел текстовую альтернативу «that serves the equivalent purpose» — то есть выполняющую ту же задачу ^[2]. Действующая версия — WCAG 2.2, рекомендация W3C от 12 декабря 2024 года ^[2]. На 14.10.2026 WCAG 3.0 остаётся рабочим черновиком (W3C Working Draft от 10 сентября 2026 года) и стандартом не является ^[19].

В России то же требование закреплено в национальном стандарте ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности». Он утверждён приказом Росстандарта от 29.08.2019 № 589-ст, введён с 01.04.2020, заменил ГОСТ Р 52872-2012, а за основу при разработке была взята WCAG 2.1 ^[12]. К стандарту внесена поправка, опубликованная в ИУС № 3 за 2020 год ^[12]. В критерии 1.1.1 стандарт использует термин «эквивалентная текстовая версия», а в разделе терминов определяет «альтернативный текст» как текст, программно сопоставляемый с нетекстовым контентом ^[12].

Третий смысл — поисковый. Google называет alt самым важным атрибутом, через который изображению передаются метаданные, и использует его вместе с алгоритмами компьютерного зрения и содержимым страницы ^[7]. Яндекс указывает, что информация из alt помогает «картиночному» роботу, который индексирует изображения для Яндекс Картинок ^[9].

Суть и механизм

Синтаксис

<img src="dalmatin-shchenok.jpg" alt="Щенок далматинца приносит мяч">

Атрибут alt указывается внутри элемента <img>. Яндекс также описывает его как «альтернативный текст», который задаётся в атрибуте ALT тега IMG ^[9]; у Google в справке речь идёт об атрибуте alt элемента <img> ^[7].

Что происходит в браузере и в экранном чтеце

• Картинка не загрузилась (ошибка сети, блокировка контента, «битая» ссылка) — браузер может показать на её месте текст из alt ^[6]. Яндекс описывает то же поведение: текст из ALT выводится вместо картинки и позволяет судить о её содержимом ^[9].
• Пустой alt="" сообщает, что изображение не является ключевой частью контента (декор или пиксель отслеживания). Невизуальные браузеры могут его пропустить, а визуальные скрывают значок «битой» картинки, если она не загрузилась ^[6].
• Атрибута нет совсем — некоторые экранные чтецы вместо описания объявляют имя файла ^[5][6]. В примере web.dev пользователь услышит что-то вроде «/160204193356-01-cat-500.jpg», что авторы называют бесполезным и сбивающим с толку ^[15].

Три состояния атрибута

Как поисковики используют alt

Google. Справка Google по SEO для изображений называет alt важнейшим атрибутом метаданных изображения и отмечает, что он одновременно повышает доступность ^[7]. Google понимает тему изображения по alt, алгоритмам компьютерного зрения и содержимому страницы ^[7]. Если картинка служит ссылкой, её alt работает как анкор — текст ссылки ^[7]. Изображения, подключённые через CSS (например, фоновые), Google не индексирует ^[7]. Руководство по SEO для начинающих определяет alt как короткий, но содержательный текст, объясняющий связь изображения с контентом, и советует размещать картинки рядом с релевантным текстом ^[8].

Яндекс. Справка Вебмастера говорит, что с alt поисковой системе проще понять, что представляет собой изображение, но текст из alt «не попадает в основной индекс» ^[9]. Для поиска по картинкам Яндекс перечисляет набор текстов: атрибуты alt и title, тексты ссылок на картинку, прилегающий текст, тексты и заголовки коротких документов с одиночной картинкой, имена файлов и скриптов картинок, в том числе с учётом транслитерации ^[11]. Alt и title Яндекс называет «наиболее универсальными» сигналами, которые «стоит прописывать всегда» ^[11]. Справка Яндекс Картинок добавляет, что изображения без содержательных описаний «могут не попасть в поисковую выдачу» ^[10].

Виды и классификации

Классификацию изображений по их функции даёт учебник W3C WAI Images Tutorial (оглавление обновлено 08.04.2026) ^[20] и его «дерево решений» (обновлено 13.05.2024) ^[4]. Изображения делятся по функции на странице, и от функции зависит, что писать в alt.

Дерево решений также указывает, что картинке с текстом, который уже есть рядом обычным текстом, и иконке, повторяющей соседнюю подпись ссылки, достаточно пустого alt ^[4]. Аналогичный пример в web.dev: значку лупы рядом со словом «Search» достаточно пустого alt="" ^[15]. Помимо пяти типов, в учебнике W3C WAI есть отдельные страницы о группах изображений и картах изображений ^[20]. Группа картинок, передающих одну мысль, получает общее описание; у карты изображений общий alt описывает картинку, а каждая кликабельная область — свою ссылку ^[20].

Близкую, но более дробную классификацию даёт спецификация HTML (WHATWG HTML Living Standard, раздел 4.8.4.4 «Requirements for providing text to act as an alternative for images»). В оглавлении раздела отдельно названы, например, ссылка или кнопка, состоящая только из картинки; графики, диаграммы и карты; иконки и логотипы; текст, превращённый в графику ради оформления; чисто декоративное изображение; группы изображений; изображение, не предназначенное пользователю ^[16].

Как применяется на практике

Как написать alt: от плохого к хорошему

Google иллюстрирует принцип на примере со щенком ^[7]. В адаптированном виде:

<!-- Плохо: атрибута нет -->
<img src="puppy.jpg">

<!-- Плохо: набор ключевых слов -->
<img src="puppy.jpg" alt="щенок собака щенки купить щенка щенок недорого">

<!-- Лучше -->
<img src="puppy.jpg" alt="щенок">

<!-- Хорошо: конкретно и по смыслу -->
<img src="puppy.jpg" alt="Щенок далматинца приносит мяч">

В оригинале лучший вариант — «Dalmatian puppy playing fetch» ^[7]. Похожий пример приводит справка Тильды: «Собака» и «Пудель» — слабые варианты, а «Щенок абрикосового пуделя сидит на траве на заднем дворе кирпичного дома» — хороший ^[17].

Основные правила:

1. Описывайте смысл в контексте. Alt должен передавать ту же мысль, что и изображение, в том же контексте ^[15]. Одна и та же фотография в статье о породе и в карточке зоомагазина может требовать разных описаний (вывод на основе ^[4][15]).
2. Не пишите «изображение», «картинка», «фото». Alt не должен описывать сам факт наличия изображения или имя файла ^[6]. Экранный чтец и так сообщает, что перед пользователем изображение (вывод).
3. Не дублируйте соседний текст. Если смысл картинки уже передан текстом рядом, достаточно alt="" ^[4][5]. WebAIM относит alt, совпадающий с соседним текстом, к «сомнительным» ^[14].
4. Ключевые слова — только по существу. Яндекс рекомендует писать в alt лишь те слова, которые относятся к картинке ^[11]; Google — не заполнять alt ключевыми словами ^[7].
5. Не путайте alt и title. MDN указывает, что title не может заменить alt, и советует не дублировать значение alt в title той же картинки, иначе некоторые экранные чтецы прочитают текст дважды ^[6]. При этом Яндекс использует title как сигнал для поиска картинок и рекомендует его заполнять ^[11] — подходы SEO-справки и справочника по доступности здесь расходятся (см. раздел «Ошибки, ограничения и спорные вопросы»).

Карточки товаров интернет-магазина

Для похожих изображений одного товара Яндекс советует задавать уникальные alt — например, «вид спереди», «вид сзади» ^[11]. Практическая схема (пример): название товара + отличающий признак кадра — цвет, ракурс, деталь. Например: «Кроссовки Model X, белые, вид сбоку» и «Кроссовки Model X, белые, подошва».

Массовая подстановка названия товара во все alt через шаблон CMS даёт одинаковые описания у разных картинок. Такие повторы WebAIM учитывает как «repetitive» — повторяющиеся alt ^[14], а Яндекс прямо рекомендует уникальные alt для разных ракурсов ^[11]. Шаблон допустим как основа, но к нему стоит добавлять переменную, отличающую кадр (вывод).

Логотипы, иконки-ссылки, баннеры

• Логотип-ссылка на главную — функциональное изображение: alt описывает назначение ссылки ^[4].
• Картинка-ссылка без текста — для Google alt такой картинки работает как анкор ^[7], поэтому пустой alt здесь оставляет ссылку без текста. По данным WebAIM за февраль 2026 года, 45 % изображений без alt были ссылками ^[14].
• Баннер с текстом — Яндекс указывает, что его робот «не умеет (пока) распознавать текст, представленный в виде графического изображения», и советует продублировать надпись обычным текстом ^[9]. Формулировка «(пока)» означает, что поведение может измениться; справка проверена 14.10.2026.

Сопутствующие сигналы

Alt работает не в одиночку. И Google, и Яндекс учитывают осмысленное имя файла ^[7][9][11], текст рядом с картинкой ^[8][11] и содержимое страницы ^[7]. Яндекс индексирует картинки форматов JPG, PJPG, PNG, GIF, BMP, SVG, PNM, TIFF, WEBP и берёт их адреса из атрибутов src, data-src и data-original ^[10] — это важно для сайтов с ленивой загрузкой. В поиск по картинкам Яндекса попадают только изображения, не запрещённые в robots.txt ^[10]; при этом CAPTCHA и автоматически сгенерированные картинки (баннеры, графики, счётчики, информеры) Яндекс советует закрывать от индексирования в robots.txt ^[9].

Где задать alt в конструкторе: пример Тильды

Например, в Тильде alt задаётся в настройках изображения. Для стандартных блоков нужно открыть меню «Контент», нажать многоточие напротив загруженного изображения и заполнить поле «SEO: alt-текст для изображения»; в блоках-галереях — нажать ссылку «Текст» и заполнить поле «Image alt for SEO» ^[17]. Справка Тильды прямо связывает alt с доступностью: альтернативный текст читается скринридером и выводится при медленном интернете ^[17].

Как измерить или проверить

Чек-лист аудита

1. Картинки без атрибута alt. Найдите все <img> без alt — по WCAG это ошибка F65 ^[3].
2. Пустые alt у значимых картинок. alt="" корректен только для декоративных изображений ^[4][5]. Каждый пустой alt проверяйте вручную: декор это или потерянное описание товара, схемы, ссылки.
3. «Мусорные» alt. Имя файла, «image», «graphic», «blank», «фото» и т. п. WCAG относит имена файлов и текст-заглушки к ошибке F30 ^[3], а WebAIM — к «сомнительным» альтернативам ^[14].
4. Повторы. Одинаковый alt у разных картинок или alt, совпадающий с соседним текстом ^[14].
5. Переспам. Перечни ключевых слов, повтор одного слова ^[7][11].
6. Картинки-ссылки. Есть ли у каждой ссылки-картинки alt, описывающий назначение ссылки ^[4][7].
7. Текст в виде картинки. Дублирована ли надпись обычным текстом ^[9].
8. CSS-фоны. Значимое изображение, подключённое через CSS, Google не проиндексирует ^[7] — его стоит перенести в <img> с alt.

Метрика

Для отчёта удобна простая доля:

Доля изображений с корректным alt = (число <img> с корректным alt / общее число <img>) × 100 %.

«Корректный» здесь означает осмысленный alt у информативных и функциональных картинок и alt="" у декоративных. Автоматически подсчитать можно только формальную часть — наличие атрибута, пустоту, совпадения; соответствие alt смыслу картинки проверяет человек (вывод).

Инструменты

• Исходный код и инструменты разработчика браузера — просмотр атрибутов конкретных <img>.
• Автоматические проверки доступности и SEO-краулеры находят отсутствующие и пустые атрибуты, но не оценивают смысл описания (вывод).

Логика автоматической проверки (мини-инструмент)

Проверка alt по URL или фрагменту HTML сводится к формальным правилам. Для каждого <img> выводятся адрес (src), значение alt и статус:

Такая проверка не оценивает SEO-эффект и не понимает содержимое изображения — она только находит формальные проблемы; тип изображения определяется по таблице из раздела «Виды и классификации».

Масштаб проблемы

Ежегодное исследование WebAIM Million проверяет доступность главных страниц миллиона популярных сайтов. По данным анализа за февраль 2026 года (обновлено 30.03.2026) ^[14]:

• отсутствие альтернативного текста у изображений обнаружено на 53,1 % главных страниц — это второй по частоте тип ошибок WCAG после низкого контраста текста;
• в среднем на главной странице 66,6 изображения; у 16,2 % всех изображений alt отсутствовал (в среднем 10,8 на страницу; пустой alt="" при этом не считался ошибкой);
• 45 % изображений без alt были ссылками; без alt оставалось каждое четвёртое изображение-ссылка;
• у 10,8 % изображений с alt текст был сомнительным или повторяющимся — «image», «graphic», «blank», имя файла или текст, совпадающий с соседним.

Данные относятся только к главным страницам и не описывают весь веб ^[14].

Ошибки, ограничения и спорные вопросы

Типичные ошибки

• Удаление атрибута у декоративной картинки вместо alt="" — ошибка F65 ^[3]; часть экранных чтецов прочтёт имя файла ^[5].
• Слова-заглушки у декоративной картинки (alt="spacer", alt="image") — ошибка F39 ^[3].
• Имя файла или текст-заглушка в alt — ошибка F30 ^[3].
• Переспам ключевыми словами — ухудшает опыт пользователей и может привести к тому, что сайт сочтут спамом ^[7].
• Alt не обновили после замены картинки — WCAG выделяет это в отдельную ошибку F20 ^[3].
• Текст только на картинке — Яндекс не распознаёт текст на изображении (формулировка справки: «пока») ^[9].

Спор 1: пустой alt — норма или недочёт?

Здесь расходятся стандарт доступности и поисковая справка. WCAG требует, чтобы декоративное изображение игнорировалось вспомогательными технологиями ^[2]; для <img> это достигается пустым alt (техника H67) или подключением картинки через CSS (техника C9) ^[3], а учебник W3C WAI рекомендует для декора alt="" ^[4][5]. Справка Яндекс Картинок говорит: «Оставлять атрибут alt пустым нежелательно» ^[11]. Противоречие снимается, если учесть цель: Яндекс пишет о картинках, которые должны находиться в поиске, а декоративная рамка или фоновая текстура в поиске по картинкам не нужна (вывод). Для изображений, несущих смысл, обе стороны согласны: alt должен быть заполнен.

Спор 2: alt и title

MDN предупреждает против дублирования alt в title, поскольку некоторые экранные чтецы прочтут текст дважды ^[6]; техника WCAG H67 для игнорируемых изображений предполагает пустой alt и отсутствие title ^[3]. Яндекс, напротив, рекомендует указывать уникальный title для каждой картинки ^[11]. Практический компромисс (вывод): не копировать alt в title дословно; если title нужен, пусть он дополняет описание.

Спор 3: длина alt

В первичных источниках этой статьи числового порога длины alt нет: Google говорит о тексте «short, but descriptive» ^[8], MDN — о «clear and concise» замене ^[6], W3C WAI — о кратком описании для простых изображений и выносе подробностей в текст страницы для сложных ^[4]. Длина — следствие правила «кратко и по смыслу», а не норма.

Спор 4: влияет ли alt на позиции страницы

Ни Google, ни Яндекс не утверждают, что заполненный alt поднимает страницу в основном поиске. Яндекс указывает, что alt в основной индекс не попадает и используется для поиска по картинкам ^[9][11]. Google говорит о понимании изображения, поиске по картинкам и о роли alt как анкора для картинки-ссылки ^[7]. Обещать рост позиций в основной выдаче за счёт alt нет оснований.

Спор 5: автогенерация alt нейросетями

Машинное описание изображения может служить черновиком alt, но бывает неточным (см. «Галлюцинации ИИ»). Исследование MacLeod, Bennett, Morris и Cutrell (CHI 2017) изучало, как незрячие люди воспринимают автоматически сгенерированные подписи к изображениям в социальных сетях. Авторы обнаружили, что участники сильно доверяют таким подписям и, если подпись не согласуется с контекстом, сами достраивают детали, чтобы устранить противоречие ^[18]. Работа 2017 года не изучала современные генеративные модели, поэтому перенос её выводов на них — гипотеза (вывод). Правила W3C WAI строятся на функции картинки на странице: передаёт ли она смысл, ведёт ли по ссылке, повторяет ли соседний текст ^[4]. Если модели передают только само изображение, она не знает, какую функцию картинка выполняет на странице; качество черновика зависит от того, передан ли модели контекст (вывод). Практичный подход — машинный черновик плюс проверка человеком (вывод).

Правовой аспект

Требование текстовой альтернативы в России описано в ГОСТ Р 52872-2019 — национальном стандарте требований доступности интернет-ресурсов, основанном на WCAG 2.1. Критерий 1.1.1 «Нетекстовый контент» (уровень A): «Весь нетекстовый контент, представленный пользователю, имеет эквивалентную текстовую версию», за исключением элементов управления, медиа, тестов, сенсорного контента, CAPTCHA и оформления, для которых установлены особые правила ^[12]. Сам стандарт говорит, что «содержит требования и рекомендации» ^[12].

Национальный стандарт относится к документам национальной системы стандартизации: это следует из определений п. 2 и п. 5 ст. 2 Федерального закона от 29.06.2015 № 162-ФЗ «О стандартизации в Российской Федерации» (в ред. от 04.08.2026) ^[21]. По общему правилу ч. 1 ст. 26 того же закона документы национальной системы стандартизации «применяются на добровольной основе», если иное не установлено законодательством РФ ^[13]. Обязательность стандарта для конкретных организаций и сайтов этой статьёй не рассматривается — это вопрос отраслевых норм, который следует уточнять по действующему законодательству. Статья не является юридической консультацией.

Частые вопросы

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

• Тег title
• Анкор
• Обратный поиск изображений
• robots.txt
• Ленивая загрузка
• Переспам
• SEO-аудит
• SEO для интернет-магазина
• Скорость загрузки сайта
• Галлюцинации ИИ