На сайте центра обучения сотрудников картинки часто несут часть содержания: схему программы, скриншот из инструкции, образец сертификата, фото аудитории. Пользователь программы экранного чтения слышит вместо картинки только её текстовую замену, атрибут alt. То же видит посетитель, у которого изображение не загрузилось из-за слабого соединения. Если там пусто или написано «image1.jpg», он теряет информацию, например о формате занятий.
Сначала определите роль картинки
Прежде чем писать текст, задайте вопрос: что потеряет посетитель, если убрать это изображение? Ответ покажет, к какому типу оно относится.
- Информативные: схема, скриншот, расписание, образец документа. Alt передаёт их смысл.
- Декоративные: фоновая волна, разделитель, абстрактная иллюстрация. Для них ставят пустой атрибут
alt='', и программа чтения их пропускает. Атрибут нельзя убирать совсем: тогда некоторые программы зачитывают имя файла. - Функциональные: иконка внутри ссылки или кнопки. Alt описывает действие, а не внешний вид: «Скачать программу курса, PDF», а не «значок документа».
Пример: страница курса «Основы работы с CRM»
Возьмём условную страницу курса для новых сотрудников отдела продаж. На ней четыре изображения:
- Фото группы за столами с ноутбуками. Рядом нет текста о формате занятий, поэтому alt содержит факт:
alt='Группа из восьми человек за ноутбуками в учебном классе'. Если подпись под фото уже говорит об этом, достаточно короткого alt или пустого. - Схема из четырёх модулей со стрелками. Вариант
alt='Схема программы'бесполезен. Лучше:alt='Программа курса: четыре модуля — карточка клиента, сделки, отчёты, настройка уведомлений'. - Иконка PDF в ссылке. Alt:
alt='Скачать программу курса, PDF'. Если текст ссылки уже говорит это, иконке подойдёт пустой alt, чтобы не было повтора. - Декоративная волна в шапке блока:
alt=''.
Модули курса лучше дублировать обычным списком рядом со схемой. Тогда текст доступен всем, его можно скопировать и распечатать.
Расписание, схемы и таблицы: когда alt недостаточно
Alt должен быть коротким, поэтому сложное содержание в него не поместится. Расписание групп, стоимость программ, состав модулей лучше делать обычным текстом или HTML-таблицей. Расписание в виде картинки нельзя прочитать программой, увеличить без потери качества или скопировать. Если изображение необходимо, например сложная схема процесса согласования заявок, дайте краткий alt и полное описание в тексте рядом: «Схема согласования заявки на обучение. Подробное описание — ниже». Дальше опишите шаги списком.
Скриншоты в инструкциях для слушателей
Учебный центр часто публикует инструкции: как войти в систему дистанционного обучения, как записаться на занятие. Основа таких материалов — пронумерованные шаги в тексте, а скриншот их иллюстрирует. В alt укажите, что показано и где искать нужный элемент: alt='Окно входа: поля логина и пароля, под ними кнопка «Войти»'. Если на скриншоте есть важная надпись, например сообщение об ошибке, повторите её в тексте инструкции, а не только в картинке.
Образец сертификата или удостоверения тоже несёт информацию: alt='Образец сертификата: название программы, ФИО слушателя, дата выдачи'.
Типичные ошибки в подписях
- Слова «картинка», «фото», «изображение» в начале: программа и так сообщает, что это изображение.
- Название файла или набор слов для поисковиков вместо описания.
- Повтор подписи, которая уже стоит под фото. Слушатель услышит одно и то же дважды.
- Слишком длинный текст. Ориентир — одно-два предложения; всё, что длиннее, переносите в основной текст.
- Описание внешности людей на фото без необходимости. Важно, что они делают в контексте страницы.
Проверочный список и порядок работы
- У каждого изображения есть атрибут alt, пусть и пустой.
- Декоративные картинки имеют
alt=''. - Alt информативных картинок отвечает на вопрос «что здесь важно для читателя».
- Расписание, цены и состав программ даны текстом, а не только картинкой.
- У картинок-ссылок alt описывает действие.
- Важный текст со скриншотов и схем продублирован на странице.
Чтобы это не зависело от памяти редактора, попросите разработчиков сделать в системе управления сайтом отдельное поле для описания при загрузке изображения и заранее предусмотреть отметку «декоративное». Проверить результат можно, отключив загрузку картинок в браузере и пройдя страницу: понятен ли смысл без них? Дополнительно стоит прослушать несколько ключевых страниц бесплатной программой экранного чтения, например NVDA. Требование к текстовым альтернативам для изображений есть в рекомендациях WCAG 2.0 (критерий 1.1.1), на них можно ссылаться в техническом задании.
