Как написать alt текст с помощью ИИ и учесть роль изображения

Нейросеть может верно распознать лупу и всё равно предложить неудачный alt-текст. Если лупа стоит в единственной безымянной кнопке поиска, пользователю важнее понять действие кнопки, чем форму значка. Для орнамента между разделами подробное описание тоже не нужно: оно добавит лишние слова при чтении страницы скринридером.

Поэтому к просьбе «напиши alt для картинки» стоит добавить контекст: где изображение размещено, зачем оно нужно и какой текст уже есть рядом. Ниже готовый промпт, редакторские примеры и результат проверки пакетного запроса на шести собственных учебных изображениях.

Почему одной картинки недостаточно

Alt-текст задаётся атрибутом alt у HTML-изображения. Его содержание зависит от задачи изображения на конкретной странице. В дереве решений W3C WAI отдельно рассматриваются изображения с информацией, элементы управления, декор, дублирование текста и сложные данные.

Представим одну и ту же фотографию красного чемодана. В карточке товара она может показывать расположение колёс и ручки. На странице о поездках тот же кадр иногда нужен только для настроения. Если изображение является единственным содержимым ссылки на каталог, возникает ещё одна задача: объяснить, куда ведёт ссылка. По пикселям невозможно надёжно восстановить все эти условия.

Решение принимает автор страницы. Модели можно поручить подготовить формулировку и объяснить выбор, но сначала нужно сообщить назначение изображения.

Что передать модели вместе с изображением

Для рабочего запроса достаточно короткой карточки контекста:

• Тема страницы и ближайший заголовок.
• Точный текст до изображения, после него и в подписи.
• Что читатель должен узнать из изображения сверх этого текста.
• Есть ли ссылка или кнопка, куда она ведёт и что делает.
• Есть ли у элемента отдельная видимая подпись или доступное имя.
• Можно ли добавить под изображением описание или таблицу.

Не заменяйте вложение названием файла. «Иконка-07.png» ничего не говорит о содержимом. Прикрепите изображение так, чтобы мультимодальный чат действительно мог его просмотреть, и проверьте, что загрузка завершена.

Если роль неизвестна, лучше написать «не определена», чем просить модель догадаться. Например, значок корзины может открывать покупки или удалять черновик. Уверенная формулировка неверного действия здесь хуже уточняющего вопроса.

Готовый промпт для alt текста

Этот шаблон подходит для одного изображения. Подставьте контекст в квадратные скобки и прикрепите сам файл.

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

Тема страницы: [тема].
Заголовок рядом: [заголовок].
Текст перед изображением: [точный текст или «нет»].
Текст после изображения и подпись: [точный текст или «нет»].
Зачем автор добавил изображение: [цель или «не определена»].
Ссылка или кнопка: [нет / действие / адрес назначения].
Отдельная подпись или доступное имя элемента: [есть / нет].
Можно ли добавить описание или таблицу: [да / нет].

Сначала определи роль изображения и кратко объясни решение.
Затем дай точное значение в формате alt="...".
Для чистого декора или полностью продублированного смысла
покажи пустой alt="", а не пропускай атрибут.
Для изображения в безымянной кнопке передай действие.
Для информативного изображения сохрани существенный смысл.
Если краткого alt недостаточно, дай само подробное описание
или таблицу и укажи, где разместить их на странице.

Не добавляй бренды, свойства, числа и причинные объяснения,
которых нет в изображении или предоставленном контексте.
Если надпись не читается, прямо укажи это.
Если без уточнения роли нельзя выбрать безопасный вариант,
задай конкретный вопрос вместо окончательного alt.

Последний пункт особенно полезен при работе с чужими макетами. Он оставляет автору решение о назначении изображения, вместо того чтобы превращать предположение модели в готовую разметку.

Для серии файлов пронумеруйте вложения и дайте отдельный контекст каждому. Просьба «напиши alt ко всем картинкам» не объясняет, почему одна из них является кнопкой, а другая повторяет подпись.

Как меняется ответ в разных ситуациях

Примеры в этом разделе составлены редакцией для объяснения правил. Это не ответы тестируемой модели.

Информативное изображение

В инструкции показано, как закрепить ремень: его свободный конец продет в пряжку и направлен вниз. Если соседний текст этого не объясняет, alt должен передать именно расположение ремня. Цвет стены и блики на столе для такой задачи не нужны.

Возможная формулировка: «Свободный конец ремня продет в пряжку и направлен вниз». Для информативных изображений W3C рекомендует передавать существенный смысл, а не составлять буквальную опись всего кадра. Рекомендации W3C.

Простая схема

Для схемы «Получить код → Проверить код → Войти» важно сохранить шаги и их порядок. Описание «Три прямоугольника со стрелками» передаёт оформление, но теряет инструкцию.

Редакторский вариант: «Получите код, затем проверьте его и войдите». Если в схеме появляются развилки и исключения, одной фразы уже может не хватить. Сначала проверьте, можно ли передать весь нужный смысл кратко, а не называйте любую схему сложной только потому, что она нарисована.

Изображение в кнопке

Допустим, значок является единственным содержимым кнопки удаления черновика. У кнопки нет другой подписи или доступного имени. Тогда «Удалить черновик» полезнее, чем «Серая корзина».

В рекомендациях для функциональных изображений W3C связывает альтернативу с действием или назначением ссылки. Если подпись уже есть, условия меняются: не следует автоматически дублировать её в alt. Сначала проверьте устройство конкретного элемента.

Декоративное изображение

Узор на полях раздела не сообщает ничего о содержании и никуда не ведёт. Для такого изображения в элементе img нужен пустой атрибут: alt=““. Слова «декоративный узор» в его значении всё равно будут лишним озвучиваемым содержимым.

Пустой alt и отсутствие атрибута различаются. Если атрибут пропущен, некоторые скринридеры могут прочитать имя файла. Это объясняется в материале W3C о декоративных изображениях.

Изображение повторяет текст рядом

На графической плашке написано «Гарантия 2 года», а сразу после неё та же фраза есть обычным доступным HTML-текстом. Если плашка не добавляет условий и не является отдельным элементом управления, alt=“” помогает избежать повтора.

Важно именно полное дублирование смысла. Если рядом написано только «Гарантия», а условия остаются исключительно на картинке, считать их уже доступными нельзя. Модели нужно передать соседний текст дословно, а не пересказать его как «примерно то же самое».

Диаграмма со значениями

Для графика с несколькими рядами данных нужна возможность получить и общую картину, и значимые подробности без рассматривания столбцов. Краткий alt может обозначить предмет диаграммы и сообщить, где находится подробное представление. Значения и связи лучше раскрыть в доступном тексте или таблице рядом.

Попросите модель подготовить это представление целиком. Ответ «добавьте таблицу» оставляет основную работу невыполненной. В руководстве W3C по сложным изображениям разобраны способы связать изображение с развёрнутой альтернативой.

При проверке таблицы сверяйте не только числа, но и их привязку: ряд, период, единицу измерения. Верное число в соседнем месяце остаётся ошибкой. Не принимайте объяснение причин роста, если исходный график показывает только значения.

Практика на шести изображениях

24 октября 2026 года мы отправили в ChatGPT шесть изображений одним сообщением. В интерфейсе был виден уровень усилий рассуждения Medium. Точное имя модели не отображалось, поэтому приписывать результат конкретной версии нельзя.

Для проверки подготовили собственную иллюстрацию рюкзака с бутылкой, схему обработки заявки, лупу для кнопки, декоративный узор, плашку с повторяющимся текстом и диаграмму вымышленных заявок. К каждому файлу приложили контекст страницы. Изображение с рюкзаком было нарисовано, а не снято на камеру.

Шаблон выше предназначен для одного изображения. В этом прогоне использован отдельный пакетный запрос со всеми шестью контекстами. Его точный текст, исходные PNG и полный первый ответ входят в учебное приложение к статье.

До отправки зафиксировали изображения, запрос и рубрику: по четыре критерия на случай. Оценивали роль, нужную информацию, применимость решения и отсутствие существенных выдумок. После получения ответа отдельно сверили его с эталоном, включая все числа диаграммы. Модель не оценивала себя баллами.

Что получилось с первой попытки

Итог: 24 из 24 критериев, шесть пройденных случаев из шести. Отправлен один запрос, корректировок не было. По протоколу второй запрос требовался только при ошибке, поэтому искусственно создавать «исправленную попытку» мы не стали.

Пустой alt оказался осмысленным ответом

Для узора и плашки «Доставка бесплатно» чат предложил alt=“” по разным причинам. Узор только украшал раздел; плашка полностью повторяла доступный текст карточки. В обоих случаях атрибут был указан явно, а не пропущен.

Фрагмент реального скриншота от 24 октября 2026 года. Ответ для плашки «Доставка бесплатно»: декоративная дублирующая роль и пустой alt. Кадрирование не меняет текст ответа.

Для кнопки результат был другим. В исходном контексте она только открывала поле поиска, и чат вернул alt=“Открыть поиск по сайту”. Это сохранило действие, которого нельзя определить по одной форме лупы.

Диаграмма получила таблицу с точными числами

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

Фрагмент реального скриншота от 24 октября 2026 года. Краткая альтернатива диаграммы и ссылка словами на предложенную ниже таблицу.

В таблице сохранились все исходные значения. Для сайта: 120, 150, 135 и 180; для телефона: 80, 75, 90 и 85; для офиса: 40, 50, 45 и 60. Порядок месяцев во всех рядах: январь, февраль, март, апрель 2026 года. Единица измерения: количество заявок.

Чат также сохранил важную оговорку: данные учебные и вымышленные. Рост сайта от января к апрелю он описал вместе с мартовским снижением, не превратив колебания в непрерывный рост. Вместо общего совета «добавьте таблицу» были даны сами строки данных и рекомендация оформить заголовки строк и столбцов в HTML.

Фрагмент реального скриншота от 24 октября 2026 года. Четыре строки данных и предложение оформить таблицу в HTML. Полный ответ с заголовками находится в учебном приложении.

Что означает этот результат

Первый ответ выполнил заранее заданные требования в шести учебных контекстах. Это полезный результат для такого запроса, но не универсальная оценка модели. Мы не сравнивали несколько моделей, не повторяли запуск для оценки устойчивости и не контролировали память или персонализацию учётной записи.

Проверяли текст ответа, а не готовую веб-страницу. HTML-таблицу не внедряли в CMS, скринридер не запускали и аудит соответствия WCAG не проводили. Поэтому 24 из 24 здесь означает прохождение нашей содержательной рубрики, а не доказанную доступность сайта.

Как проверить ответ перед публикацией

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

Для редакционной проверки удобно пройти пять вопросов:

1. Верно ли определена роль: информация, действие, декор, дублирование или сложные данные?
2. Передан ли смысл, ради которого изображение находится на странице?
3. Нет ли выдуманных деталей, неподтверждённых свойств и неверно прочитанных надписей?
4. Действительно ли подготовлены обещанные описание и таблица, а их расположение понятно читателю?
5. Попало ли утверждённое значение в нужный атрибут на опубликованной странице?

Последняя проверка нужна уже в CMS или HTML. Текст из чата не доказывает, что редактор сохранил пустой alt, не перенёс описание в поле title и не добавил подпись вместо альтернативы. У кнопки отдельно проверьте получившееся доступное имя.

Если ответ требует исправления, укажите конкретную проблему: «Назван внешний вид значка, но не действие кнопки» или «Число за март отнесено к апрелю». Повторная просьба «сделай лучше» не задаёт проверяемой цели. Для сравнения сохраняйте исходную и исправленную версии отдельно, а не перезаписывайте первую.

Нужно ли ограничивать alt 125 символами

В советах W3C ориентиром служит краткость, достаточная для передачи назначения изображения, а не универсальная граница в 125 символов. Если нужна развёрнутая информация, её стоит вынести в отдельное описание.

Не обрезайте важную часть инструкции ради круглого числа. Но и абзац о каждой детали фона обычно не помогает. Сначала сформулируйте нужный смысл, затем уберите то, что ничего не добавляет. Слова «картинка» или «изображение» часто избыточны; уточнение «фотография» или «иллюстрация» оставляйте, когда различие важно.

Что делать с ключевыми словами для SEO

Alt не стоит превращать в список запросов. Google Search Central рекомендует полезное описание в контексте страницы и предупреждает против заполнения атрибута ключевыми словами.

Если на изображении показан складной стул, его название естественно для описания. Фраза «купить стул недорого доставка скидка» не объясняет изображение и не помогает понять действие. При генерации alt не просите модель включить весь семантический кластер: поставьте ей задачу передать содержание и роль.

С чего начать

Возьмите одно изображение с рабочей страницы, скопируйте окружающий текст и заполните контекст в промпте. После ответа проверьте роль, факты и разметку. Для диаграммы отдельно сверьте данные, для кнопки проверьте действие, для декора убедитесь, что атрибут действительно пустой.

Такой процесс помогает готовить текстовые альтернативы последовательно. Он не заменяет проверку всей страницы: по одному alt нельзя судить о доступности навигации, форм, контраста и работы интерфейса со скринридером.

Скачать учебные изображения, точный запрос, первый ответ и критерии проверки (ZIP)