Как написать alt-текст с помощью нейросети: определите функцию изображения на странице, передайте модели точное описание визуала и разрешённый контекст, получите черновик и проверьте его перед публикацией. Модель предлагает формулировку, решение о содержании остаётся за автором.
Определите функцию изображения в контексте
Работа начинается с вопроса: что изображение сообщает читателю именно здесь. Документация Microsoft 365 описывает alt-текст как описательный текст, который передаёт смысл и контекст визуального элемента в цифровой среде. Скринридеры Narrator, JAWS и NVDA зачитывают это описание вслух, и точная формулировка заметно снижает неоднозначность.
Руководство Section508.gov советует описывать ту часть изображения, которая связана с окружающим контекстом, и передавать существенную информацию. Пример из того же руководства: для фотографии полезное описание — имя человека, а перечисление одежды и цвета кадра уводит от задачи.
Разбор дерева решений W3C начинается с вопроса, содержит ли изображение текст. Если текст дублируется рядом настоящим текстом или служит только визуальным эффектом, подходит пустой атрибут alt. Для изображения в ссылке или кнопке дерево решений предлагает проверить, передаёт ли текст назначение или действие элемента.
Практический порядок для автора:
- Откройте страницу и посмотрите, что находится рядом с картинкой.
- Сформулируйте одной фразой, зачем изображение здесь.
- Проверьте, есть ли та же информация в соседнем абзаце.
- Запишите вывод: информативное, функциональное, декоративное или сложное изображение.
Этот вывод становится входом для промпта. Без него модель описывает картинку вообще, и описание расходится с ролью визуала на конкретной странице.
Решите, нужен ли alt или пометка декоративного
Веб-руководство WebAIM формулирует признак декоративного изображения: оно не несёт важного содержания, используется для оформления и не выполняет функции ссылки или кнопки. Такое изображение получает пустой alt. Вопрос-проверка из того же руководства звучит так: если убрать картинку, потеряется ли важное содержание. Ответ «ничего не потеряется» указывает на пустой атрибут.
Документация Microsoft 365 показывает, как это выглядит в офисных приложениях. В панели Alt Text есть команда «Mark as decorative», после которой поле ввода текста становится неактивным. При экспорте документа в PDF визуалы, помеченные декоративными, автоматически получают тег артефактов и пропускаются скринридерами.
Различие между двумя средами важно для проверки. В HTML декоративная картинка получает alt=»». В офисном редакторе та же картинка получает пометку декоративной. Результат для читателя совпадает: изображение пропускается, лишний текст не зачитывается.
Ошибка, которую стоит поймать на этом шаге, описана на Section508.gov: если изображение не помечено декоративным, скринридер может прочитать имя файла вместо того, чтобы пропустить картинку. Имя файла вроде img.png не помогает читателю.
Передайте нейросети описание и контекст
Модель работает с тем, что вы ей дали. Если файл изображения недоступен инструменту, передайте точное описание визуала словами и контекст страницы. Так можно подготовить черновик в текстовом чате; точность исходного описания и ответа всё равно нужно проверить.
Что входит в постановку задачи:
- что изображено, с деталями, которые важны для смысла;
- где стоит изображение и что рядом с ним;
- какую роль оно играет: кнопка, иллюстрация, график, оформление;
- что запрещено добавлять: причины, метрики, выводы, которых нет в данных.
Для учебного набора ниже файл в модель не загружается. Все визуальные сведения заданы словами, ответы составлены вручную как эталон проверки. Качество распознавания изображения здесь не измеряется.
Разделяйте два запроса. Первый — про содержание изображения. Второй — про его функцию на странице. Смешение этих вопросов даёт описание, которое пересказывает картинку и теряет её роль в интерфейсе.
Промпт для трёх типов изображения
Ниже три заполненных промпта для условных ситуаций. Их можно скопировать целиком и сравнить ответ с ручным эталоном из следующего раздела.
Промпт для функционального изображения — стрелки, которая служит единственным содержимым кнопки:
Предложи доступное имя для красной стрелки вправо — единственного содержимого кнопки, открывающей следующий шаг формы. Отрази действие, не внешний вид. Название продукта и другие функции неизвестны.
Промпт для проверки декоративности — той же стрелки рядом с подписанной кнопкой:
Красная стрелка вправо стоит рядом с текстовой кнопкой Следующий шаг, сама не нажимается и информации не добавляет. Нужен ли ей непустой alt? Объясни отдельно от доступного имени кнопки.
Промпт для диаграммы с данными:
Напиши короткий русский alt к диаграмме Обработанные заявки: май 120, июнь 90, июль 150. Контекст: нагрузка поддержки за три месяца. Тренд рядом не описан, полная таблица будет под изображением. Не объясняй причины и не добавляй метрик.
Что менять под себя: описание элемента, действие кнопки, подпись соседней кнопки, название диаграммы, значения и тему страницы. Формулировку «не объясняй причины» сохраняйте: она удерживает модель от домыслов.
Один визуал, разные допустимые ответы
Условный пример. Красная стрелка вправо без текста. В первом контексте это единственное содержимое кнопки, открывающей следующий шаг формы. Доступное имя — «Следующий шаг». Описание передаёт действие.
Во втором контексте та же стрелка стоит рядом с уже подписанной кнопкой «Следующий шаг», сама не нажимается и смысла не добавляет. Здесь стрелка декоративная: в HTML допустим alt=»», в офисном редакторе — пометка декоративной. Доступное имя самой кнопки при этом сохраняется.
Сравните два ручных ответа. «Красная стрелка вправо» верно называет предмет, но не сообщает действие первой кнопки. «Следующий шаг» во втором контексте повторит существующую подпись, если присвоить его декоративной стрелке. Удалять подпись самой кнопки при этом нельзя: проверяется отдельный элемент оформления.
Отсюда правило для работы с моделью: один и тот же файл даёт разные правильные ответы. Выбор зависит от контекста, и этот выбор делает автор страницы. Модель предлагает вариант, автор сверяет его с ролью изображения.
| Контекст | Роль стрелки | Ответ |
|---|---|---|
| Единственное содержимое кнопки | Функциональное | «Следующий шаг» |
| Рядом с подписанной кнопкой | Декоративное | Пустой alt или пометка |
| Диаграмма с заявками | Данные | Краткое описание и таблица значений |
Краткий alt и полная таблица диаграммы
Сложные изображения требуют двух частей. Учебное руководство W3C по сложным изображениям описывает схему: короткое описание определяет изображение и указывает, где искать подробности, а длинное описание передаёт существенную информацию. К сложным относят графики, диаграммы, схемы и карты.
Условный пример. Столбчатая диаграмма числа обработанных заявок: май 120, июнь 90, июль 150. Заголовок страницы — «Нагрузка поддержки за три месяца». Рядом описания тренда нет, полная таблица будет сразу под графиком.
Короткий alt: «Обработанные заявки: после снижения со 120 в мае до 90 в июне показатель вырос до 150 в июле. Значения приведены в таблице ниже».
Таблица под графиком:
| Месяц | Обработанные заявки |
|---|---|
| Май | 120 |
| Июнь | 90 |
| Июль | 150 |
Руководство Section508.gov советует избегать слишком длинных описаний в alt. Если изображение подробное, короткое описание ставят в атрибут, а под изображением дают ссылку на таблицу данных или развёрнутое описание. Тот же источник предупреждает: не приписывайте диаграмме выводы, которых в данных нет.
Проверьте выдуманные объекты, числа и повтор
Проверка черновика идёт по четырём пунктам.
Первый: объекты. Если в описании появилось то, чего нет в исходных данных, фразу убирают. Отрицательная проба «Поддержка ускорилась на 25%» отклоняется: данные о числе заявок не измеряют скорость.
Второй: числа. Каждое значение сверяют с источником. В примере с диаграммой допустимы 120, 90 и 150, и только они.
Третий: повтор. Документация Microsoft 365 прямо просит не повторять окружающий текст и не использовать обороты вроде «график с» или «изображение с». Руководство Section508.gov называет повтор информации из основного текста среди частых ошибок.
Четвёртый: язык. Section508.gov требует, чтобы alt-текст шёл на том же языке, что и основной контент страницы.
| Что проверяем | Признак проблемы | Действие |
|---|---|---|
| Объекты | Появилась причина или вывод | Удалить фразу |
| Числа | Значение не из данных | Вернуть исходное |
| Повтор | Фраза дублирует абзац рядом | Сократить |
| Язык | Описание на другом языке | Перевести |
Проверка результата в редакторе
Финальный шаг зависит от среды публикации. В документации Microsoft 365 описан Accessibility Checker: на вкладке Review выбирают Check Accessibility, в панели справа появляются проблемы по категориям, а по каждому пункту — рекомендованные действия. Там же можно открыть панель Alt Text, отредактировать или одобрить автоматическое описание.
Проверка в HTML опирается на дерево решений W3C. Пройдите по вопросам: содержит ли изображение текст, используется ли оно в ссылке или кнопке, добавляет ли смысл странице, является ли декоративным. Ответы дают тип изображения и подсказывают нужный атрибут.
Практический порядок проверки:
- Откройте панель alt-текста в своём редакторе.
- Сверьте описание с исходными данными.
- Убедитесь, что декоративные элементы помечены.
- Проверьте, что описание не дублирует соседний абзац.
- Прочитайте текст вслух: он должен звучать как фраза для человека.
Для учебной диаграммы после вставки проверьте порядок чтения: краткое описание отсылает к таблице ниже, таблица действительно стоит там и содержит май, июнь и июль с исходными значениями. Для стрелки проверьте доступное имя кнопки после сохранения страницы. Отчёт проверки редактора не заменяет эти проверки смысла и расположения.
Частые вопросы
Можно ли поручить нейросети весь alt-текст?
Для нашего набора нейросети передают заполненный промпт, затем сверяют ответ с ручным эталоном. У стрелки проверяют действие кнопки и отсутствие повтора, у диаграммы — исходные значения и отсутствие выдуманных причин.
Что делать, если изображение декоративное?
Веб-руководство WebAIM относит к декоративным изображения, которые не несут важного содержания, служат оформлению и не выполняют функции ссылки. Такие изображения получают пустой alt. В офисном редакторе используется пометка декоративного элемента.
Как описать диаграмму, если данных много?
Учебное руководство W3C по сложным изображениям предлагает две части: короткое описание в атрибуте и длинное описание рядом. Руководство Section508.gov советует дать короткий alt и ссылку на таблицу данных под изображением. Числа в описании берут из самой диаграммы.
Почему описание повторяет текст рядом?
В нашем втором контексте рядом со стрелкой уже есть подпись кнопки. Повторное «Следующий шаг» у декоративной картинки добавит лишнее озвучивание. Сохраните подпись кнопки, а для отдельной стрелки задайте пустой alt или пометку декоративного элемента.
Как проверить alt-текст перед публикацией?
В Microsoft 365 запускают Accessibility Checker на вкладке Review и смотрят рекомендованные действия. В HTML проходят по дереву решений W3C и определяют тип изображения. Затем сверяют объекты, числа, язык и повтор с соседним текстом.