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