Альтернативный текст для изображений онлайн-курса: примеры и проверка

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

Определите функцию изображения

W3C различает информативные, декоративные и функциональные изображения. Для первых нужна существенная информация, для последних — назначение действия; у действительно декоративной картинки может быть пустой alt. Эти принципы изложены в руководстве WAI по изображениям. Решение зависит от контекста конкретной страницы, а не только от самого файла.

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

Напишите короткую альтернативу простому примеру

Представим скриншот формы с выделенным обязательным полем. Слабое описание — «Скриншот 5». Более полезное: «В форме заявки обязательное поле “Тема обращения” отмечено звёздочкой». Здесь названа информация, ради которой изображение включено в урок. Не нужно перечислять браузерные вкладки и цвет рамки, если они не участвуют в объяснении.

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

Вынесите сложные данные в подробное описание

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

Возьмём условную диаграмму заявок: в понедельник поступило 12 обращений, во вторник 18, в среду 9. Короткий текст обозначает предмет: «Число обращений по дням; данные приведены ниже». Затем перечислите дни, значения, единицу измерения и вывод, который диаграмма иллюстрирует в объяснении. Если цвет обозначает срочность, передайте это словами. Одно название «График обращений» оставляет ученика без самих данных и потому не решает задачу.

Опишите переходы в учебной схеме

В алгоритме важны не только блоки, но и условия выбора следующего шага. Представим схему проверки заявки. Текст «три прямоугольника и две стрелки» передаёт внешний вид, но не позволяет воспользоваться правилом. Лучше описать последовательность: сначала проверяем наличие номера заказа; если номер есть, ищем запись; если его нет, запрашиваем уточнение.

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

Проверьте функциональные картинки отдельно

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

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

Введите проверку в выпуск урока

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

В материалах курса Umhub размещайте объяснения рядом с тем шагом, где они нужны ученику, и проверяйте итоговую страницу после сохранения. Перед публикацией сверяйте версии: обновлённая диаграмма со старым описанием вводит в заблуждение. Результат работы — возможность понять те же данные и действия другим способом. Количество заполненных полей само по себе такой возможности не доказывает.