Как написать alt-текст: шесть примеров и быстрая проверка

Сначала задача изображения, затем слова

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

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

Ниже — придуманные редакционные ситуации, а не результаты аудита реальных сайтов. Примеры относятся к обычным HTML-изображениям. Встроенный SVG, canvas, PDF и интерфейсы соцсетей требуют отдельной проверки реализации.

1. Фотография, по которой можно найти вход

Ситуация: страница мастерской объясняет, как добраться. На фото — синяя боковая дверь рядом с велопарковкой; в окружающем тексте этого ориентира нет.

Слабо: «Фото здания». Лучше: «Вход в мастерскую — синяя боковая дверь рядом с велопарковкой». Полезная информация здесь — как узнать вход, а не перечень всех предметов в кадре.

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

2. Баннер для настроения

Ситуация: на странице подписки стоит стоковая фотография блокнота. Она создаёт настроение, не сообщает ничего нового и не является ссылкой.

Задайте явно пустой атрибут: alt="". Пустой и отсутствующий alt — разные вещи: если атрибут пропущен, некоторые программы экранного доступа могут прочитать имя файла. Не пишите в альтернативе «декоративное изображение».

Пустое поле в CMS ещё не доказывает, что результат правильный. Проверьте элемент изображения на опубликованной странице: в нём действительно должно быть alt="". Если в CMS есть отметка «декоративное изображение», проверьте, что она создаёт.

3. Обложка — единственное содержимое ссылки

Ситуация: обложка отчёта — единственное содержимое ссылки на PDF. Другого доступного имени у ссылки нет.

Слабо: «Зелёная обложка отчёта». Лучше: «Читать отчёт общественной мастерской (PDF)». Читателю нужно знать, куда ведёт ссылка.

Если обложка и видимый текст «Отчёт общественной мастерской (PDF)» находятся внутри одной ссылки, а обложка ничего не добавляет, задайте ей alt="". Текст рядом, но за пределами ссылки, не становится автоматически именем ссылки-картинки. Проверяйте ссылку целиком.

4. Скриншот с выбранной настройкой

Ситуация: инструкция показывает экран настроек, где вместо «Каждое сообщение» выбрана «Еженедельная сводка». Важен именно выбор.

Слабо: «Скриншот настроек». Лучше: «Частота уведомлений — Еженедельная сводка». Саму инструкцию также запишите обычным текстом страницы, чтобы её можно было выполнить без разбора скриншота.

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

5. График, которому мало одного предложения

Ситуация: на вымышленном графике сравниваются записи в мастерскую: понедельник — 12, вторник — 18, среда — 15. Его задача — сравнить дневные итоги.

Короткая альтернатива: «Записи в мастерскую по дням; значения и сравнение ниже». Затем действительно разместите рядом обещанный текст или таблицу: понедельник — 12; вторник — 18; среда — 15. Больше всего записей во вторник — на шесть больше, чем в понедельник.

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

6. Афиша с важным текстом

Ситуация: только на изображении написано «Ремонтное кафе — суббота, 14 ноября, 10:00–13:00 — Западный зал». Сведения о мероприятии вымышлены.

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

Не ограничивайтесь цветами афиши, теряя дату или место. Если сама иллюстрация важна для статьи, её вклад тоже нужно описать.

Карточка проверки перед публикацией

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

• Страница и изображение: где оно используется и какую задачу выполняет?
• Информация в тексте: что читатель уже может узнать без картинки?
• Выбранный вариант: краткое описание / действие или назначение ссылки / пустой alt / короткий alt и подробный текстовый эквивалент.
• Точная формулировка: запишите альтернативу или явно укажите alt="".
• Проверка результата: изучите элемент изображения, а для картинки-ссылки — доступное имя всей ссылки.
• Проверка чтением: прочитайте окружающий текст и альтернативу по порядку. Не потерялось ли важное? Нет ли ненужного повторения?
• Следующий шаг: по возможности попросите читателя выполнить задачу с привычной вспомогательной технологией; запишите проблему и исправление, а не просто отметку «пройдено».

Что показывает быстрая проверка

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

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

Источники и материалы

• WAI: decorative images
• WAI: functional images
• WAI: complex images
• WAI: informative images
• web.dev: images