Введение: в чём вообще проблема
Представьте, что вы верстаете страницу «О компании». В тексте — фотография улыбающегося человека за чашкой чая. Вы, как ответственный разработчик, прописываете для неё текст в атрибут alt: описываете внешность, позу, обстановку. А потом задумываетесь: нужно ли подписать фото отдельно? Не будет ли подпись «Наш основатель Иван Петров» простым повторением того, что уже сказано в alt?
А теперь другая ситуация. Готовите годовой отчёт с графиком роста выручки. Данных много, тренд неочевиден. Куда поместить пояснение: в alt, чтобы его зачитал скринридер, или в видимую подпись под графиком, чтобы каждый читатель понял суть? И можно ли сделать и то и другое?
Любой, кто хоть раз сталкивался с вёрсткой изображений, попадал в эту ловушку. У нас есть два похожих инструмента — alt и figcaption. Оба как-то связаны с картинками. Оба что-то объясняют. Но ведут себя они по-разному, и путать их нельзя. Этот текст — про то, как перестать гадать и начать понимать логику HTML-элементов, которые с виду похожи, но выполняют принципиально разные задачи.
Две разные функции: замена и пояснение
Чтобы понять разницу между alt и подписью, нужно забыть на минуту про вёрстку и подумать про людей. У нас есть две совершенно разные аудитории, и каждому нужна своя забота.
Атрибут alt — это невидимая замена изображения. Он нужен тем, кто по какой-то причине не может увидеть картинку: незрячие люди пользуются скринридерами, которые зачитывают alt вслух; кто-то отключил показ изображений, чтобы сэкономить трафик; поисковики тоже читают alt, чтобы понять содержание. Во всех этих случаях alt берет на себя функцию картинки. Если изображение несёт смысл — фотография продукта, график, кнопка с иконкой, — alt должна этот смысл передать словами так же точно, как передала бы сама картинка зрячему пользователю. Если изображение чисто декоративное — скажем, узор на фоне, — alt может быть пустым, чтобы скринридер его просто пропустил.
Подпись — это видимое пояснение для всех. А вот figcaption живёт совсем другой жизнью. Это элемент, который видят все читатели без исключения. Он стоит рядом с картинкой и комментирует не столько само изображение, сколько его роль в тексте. Подпись может назвать человека на фото: «Иван Петров, основатель компании». Она может объяснить, что показывает график: «Резкий рост продаж после запуска мобильного приложения». Или указать на деталь: «Красным отмечена уязвимость в коде». Подпись нужна и зрячим, и незрячим — просто последние услышат её второй, после alt.
Главное различие, которое нужно вынести из этой части: alt заменяет картинку для тех, кто её не видит, а подпись объясняет картинку для всех. Это не одно и то же. Это разные функции, и они не должны смешиваться.
Отсюда следует простое, но жёсткое правило: alt и figcaption не должны дублировать друг друга. Если в подписи написано «Диаграмма роста продаж», а в alt — «График, показывающий уверенный рост выручки в третьем квартале», то слепой пользователь дважды услышит одно и то же, а зрячий увидит в подписи лишь общую фразу, не узнав важных деталей. Хорошо, когда каждый элемент делает свою работу: alt даёт полное описание содержания картинки, а подпись добавляет контекст, который неочевиден из самого изображения.
Главный вопрос: когда изображению нужна подпись
Итак, мы выяснили, что alt есть у каждого осмысленного изображения. Это обязательно. А вот подпись — штука факультативная. И здесь возникает главный вопрос: как понять, достаточно ли простого img с хорошим alt или нужно оборачивать картинку в figure и добавлять figcaption?
Критерий на самом деле прост: подпись нужна тогда, когда изображение перестаёт быть самодостаточным. То есть когда глядя только на картинку, даже с идеальным alt, читатель не может полностью понять, зачем она здесь и что должна ему сообщить. В моей практике такие ситуации распадаются на три типовых сценария.
Первый сценарий: контекст не очевиден. Вернёмся к фотографии человека за чашкой чая. Если это личный блог, где все фото так или иначе про автора, alt с описанием внешности выполняет свою задачу — даёт представление о внешности автора, а то, что это автор, читатель понимает из контекста. Но если это корпоративный сайт с командой из двадцати человек, одной картинки мало. Зрячий видит лицо, но не знает имени и должности. Слепой слышит описание внешности, но тоже не понимает, кто этот человек. Без подписи фотография повисает в воздухе. Здесь figcaption с текстом «Иван Петров, art-директор» становится необходимым смысловым якорем.
Второй сценарий: изображение требует пояснения, которое не умещается в alt. Речь не о длине строки, а о функции. Атрибут alt должен описывать содержание картинки — это его прямая и единственная задача: быть заменой изображения. А подпись может объяснять значение этой картинки для текста. Посмотрите на разницу. Для скриншота интерфейса корректный alt будет звучать так: «Форма входа с полями для логина, пароля и кнопкой "Отправить"». А подпись к этому же скриншоту может быть другой: «Уязвимость в системе до внедрения капчи». Видите? Атрибут alt отвечает на вопрос «что изображено?», подпись — на вопрос «почему это здесь и почему это важно?». Иногда ответ на второй вопрос важнее первого, и тогда подпись необходима.
Третий сценарий: ссылаемся на изображение из текста. В академических статьях, технических документах и любых сложных материалах часто пишем: «как показано на рисунке 1» или «результаты эксперимента представлены ниже». Если используете такие отсылки, просто обязаны оформить изображение как figure с нумерованной подписью. Потому что читатель должен найти этот «рисунок 1» глазами, а без явной подписи, привязанной к картинке, это превращается в игру в угадайку. Нумерация в figcaption создаёт надёжную связь между текстом и иллюстрацией.
Во всех остальных случаях — когда картинка просто иллюстрирует сказанное, когда её смысл прозрачен из контекста, когда она не требует дополнительных комментариев — достаточно обычного img с грамотным alt. Не нужно усложнять разметку без необходимости.
Как это работает
Теория теорией, но без конкретных примеров она остаётся абстракцией. Давайте посмотрим, как описанные выше принципы реализуются в реальной вёрстке. Я специально подобрал три разные ситуации, чтобы охватить самые частые сценарии.
Первый пример: фотография человека. Возьмём ту самую фотографию с чашкой чая. Допустим, мы верстаем страницу «О компании» для небольшого агентства. Рядом с фото нет прямого указания, что это основатель, но из текста понятно, что речь идёт о команде. Как будет выглядеть правильная разметка?
<figure>
<img src="ivan-petrov.jpg"
alt="Мужчина с короткой стрижкой и очками, в светлой рубашке, улыбается и держит кружку с чаем. На заднем плане книжный шкаф.">
<figcaption>Иван Петров, основатель и генеральный директор</figcaption>
</figure>Посмотрите, как распределились роли. Атрибут alt даёт полное описание внешности — для тех, кто не видит фото, но хочет представить себе человека. Это буквально заменяет картинку. Подпись же добавляет то, чего в картинке нет и быть не может: имя и должность. Они работают в связке, но не повторяют друг друга. Напиши мы в alt «Иван Петров, основатель, улыбается с чашкой чая» — и слепой пользователь не получит описания внешности, а зрячий увидит в подписи ту же информацию. Дублирование, да ещё и с потерями.
Второй пример: несколько изображений, объединённых одной идеей. Представьте, что проводите аудит доступности сайта и находите системную проблему: на разных страницах интерактивные элементы теряют фокус клавиатуры. Вместо того чтобы создавать три отдельных замечания с тремя скриншотами, группируете их в один блок.
<figure>
<img src="focus-issue-menu.png"
alt="Выпадающее меню открыто, но вокруг активного пункта нет видимой подсветки">
<img src="focus-issue-button.png"
alt="Кнопка отправки формы в фокусе, но визуально это никак не обозначено">
<img src="focus-issue-checkbox.png"
alt="Чекбокс получил фокус, но рамка вокруг него не появляется">
<figcaption>Повсеместная проблема: отсутствие видимого фокуса на интерактивных элементах</figcaption>
</figure>Здесь каждый alt выполняет свою прямую функцию: описывает конкретное изображение. А подпись работает на другом уровне — она объединяет их общим смыслом и формулирует проблему, которую иллюстрируют все три картинки вместе. Читатель видит сначала частные случаи, а потом получает обобщение. Это сильнее, чем если бы мы пытались впихнуть это обобщение в каждый alt или, наоборот, оставили бы картинки без итогового вывода.
Третий пример: сложная графика и ссылки на рисунки. Бывает и обратная ситуация: одна картинка иллюстрирует сразу несколько мыслей, и хотим ссылаться на неё из разных мест текста. Классический случай — сложная диаграмма или схема, особенно выполненная в формате SVG, где можно добавить внутренний заголовок.
<figure>
<svg width="500" height="200" viewBox="0 0 500 200"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby="chart-title">
<title id="chart-title">
Линейный график роста числа подписчиков: стабильный рост с 2022 года и резкий скачок в январе 2025
</title>
<!-- Здесь идут сами линии графика, оси, точки данных -->
</svg>
<figcaption>Рисунок 1. Динамика подписной базы за три года</figcaption>
</figure>Обратите внимание на title внутри SVG. Для сложных векторных изображений это аналог alt — краткое описание сути. А figcaption даёт понятное имя и номер, чтобы мы могли написать в тексте: «как видно на рисунке 1, основной прирост пришёлся на начало 2025 года». Детальные цифры — точные даты, проценты, значения в точках — выносим либо в основной текст, либо в отдельную таблицу. Не нужно перегружать ни title, ни подпись: у каждого своя задача.
Эти три примера покрывают, наверное, 90 процентов ситуаций, с которыми сталкивается верстальщик или редактор. Остальное — вариации на те же темы.
Заключение: простой тест для самопроверки
Мы проделали большой путь. Разобрались, что alt и figcaption — не синонимы и не взаимозаменяемы. Поняли: alt заменяет изображение для тех, кто его не видит, а подпись поясняет изображение для всех. На примерах увидели, как это работает в реальных ситуациях.
Теперь главное — как не запутаться в следующий раз, когда сядете верстать очередную страницу с картинками. Я предлагаю простой мысленный тест из двух вопросов.
Первый вопрос: что произойдёт со смыслом текста, если изображение вообще убрать?
Если смысл потеряется — значит, alt обязан этот смысл сохранить. Атрибут alt должен быть таким, чтобы человек, не видящий картинки, понял из текста то же самое, что понял бы зрячий, глядя на картинку. Это базовый принцип, он работает всегда.
Второй вопрос: что произойдёт со смыслом, если убрать подпись?
Если изображение станет непонятным, повиснет в воздухе или потеряет связь с текстом — значит, подпись необходима. Если же картинка и без подписи говорит сама за себя, а её роль в тексте очевидна — figcaption можно смело опускать.
И последнее, что стоит запомнить. Самый простой способ наделать ошибок — пытаться сделать один элемент «немножко и тем и другим». Не пишите в alt то, что должно быть в подписи. Не прячьте в подпись описание картинки, предназначенное для незрячих. Держите в голове эту формулу:
Замена и пояснение — не одно и то же. Если запомните эту разницу, вы не ошибётесь в выборе.
Благодарю Мартина Андерхилла (Martin Underhill) за статью «Figcaptions versus alt text», которая вдохновила на написание этого материала и помогла структурировать собственный опыт.