Alt-текст в веб-статье: как описать смысл иллюстрации и не повторять подпись

Alt-текст — короткая текстовая замена изображения, которая передаёт его функцию в конкретной статье. Чтобы написать её, сначала решите, зачем картинка нужна читателю: объясняет мысль, украшает страницу, ведёт по ссылке или содержит данные. Затем назовите именно этот смысл простыми словами. Подпись под изображением может сообщать автора и контекст, а альтернативный текст — передать то, что иначе останется недоступным.

Один и тот же снимок может требовать разных альтернатив. Фотография чашки на странице кофейни способна быть декоративным настроением, а на странице о форме носика чайника — частью сравнения. В первом случае подробное «Белая чашка на деревянном столе рядом с окном» лишь добавит шум. Во втором важна не сама чашка, а различие формы, которое автор разбирает в тексте.

Перед написанием задайте себе вопрос: если убрать изображение, какую полезную информацию потеряет читатель? Ответ определяет тип и объём текста.

Это не четыре визуальных стиля, а четыре задачи. Яркая иллюстрация не обязательно информативна, а простая пиктограмма может быть единственным обозначением действия. В руководстве W3C по текстовым альтернативам изображений решение также предлагается принимать с учётом назначения картинки в текущем контексте.

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

Допустим, раздел объясняет, почему перед экспортом шрифта следует сравнить знаки в словах, а не только по отдельности. На картинке рядом лежат два листа: на одном буквы расставлены в таблице, на другом они собраны в короткие слова. Слабая альтернатива — «Листы с буквами на столе»: она фиксирует объекты, но не объясняет, что важно. Лучше: «Сравнение отдельных знаков и тех же букв, собранных в слова перед экспортом». Короткая подпись под фото может назвать автора и дату съёмки; повторять их в alt не требуется, если эти сведения уже доступны рядом.

Перед записью проверьте три вещи:

Alt не должен становиться скрытым абзацем. Когда для понимания нужны причинные связи, числовые значения или несколько шагов, перенесите подробности в обычный видимый текст, список или таблицу. В самой альтернативе оставьте короткий ориентир: что это за схема и где находится её описание. Так подробный ответ доступен всем, включая людей, которые используют увеличение, переключатели или текстовый поиск.

Пустой alt — осознанный выбор для элемента <img>, который не несёт необходимой информации и не выполняет действие. Например, в статье о настройке межстрочного интервала рядом с абзацем может стоять мягкая фоновая иллюстрация с карандашом и листом. Если она только украшает страницу, описание «Карандаш и лист бумаги» не добавит смысла и будет регулярно отвлекать от текста. В HTML оставляют атрибут, но его значение пустое: <img src="decoration.png" alt="">.

Не удаляйте атрибут alt целиком в надежде, что вспомогательная технология догадается о намерении. W3C отдельно объясняет, что отсутствие атрибута может привести к озвучиванию имени файла, например img_042_final2.png. И не используйте слово «декоративная» как описание: оно всё равно создаёт ненужную остановку при чтении.

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

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

Сравните формулировки для иллюстрации к разделу о распознавании кириллицы:

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

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

Когда изображение содержит текст, сначала выясните, есть ли те же слова в обычном тексте страницы. Если афиша приводится как пример и её заголовок уже процитирован рядом, повторять целиком весь плакат не обязательно; alt может сообщить, какую роль он играет в статье. Если же скриншот — единственное место, где показано название кнопки, предупреждение или короткая надпись, эти слова должны быть представлены текстом. W3C разбирает такие случаи в разделе об изображениях с текстом.

У графика, карты, пошаговой схемы или диаграммы альтернатива должна помогать найти соответствующее объяснение, но не заменять его. Хорошая структура может быть такой: короткая фраза «Схема показывает три этапа подготовки изображения; подробное описание приведено далее», затем видимый список этапов с их связями. Для графика добавьте текстовый вывод и данные, которые важны для аргумента, а не только название осей.

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

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

Для редакционного процесса заведите простое поле «Зачем эта картинка нужна?» рядом с полем alt. Оно заставит автора отталкиваться от роли, а не от автоматического перечисления предметов. Редактору достаточно проверить: совпадает ли альтернатива с тезисом, нет ли дубля подписи, нет ли рекламного или поискового набора ключевых слов. Описание должно говорить человеческим языком и оставаться верным кадру.

При совместной работе фотограф, автор и редактор могут по-разному понимать цель изображения. Автор знает, какой тезис иллюстрация поддерживает; фотограф — что именно в кадре; редактор страницы видит соседний текст. Перед публикацией полезно сверить формулировку с основным тезисом и соседней подписью, а не просто попросить генератор описать визуальную сцену. Автоматическое распознавание способно перечислить предметы, но не знает, почему изображение включено именно в эту статью.

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

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

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

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

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

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

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