В печатных изданиях изображения часто сопровождались подписью. В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и такого типа подписи. В HTML5 нам дали такую возможность, введя элементы <figure> и <figcaption>.

Давайте для начала определимся с терминами.

• alt: альтернативное описания изображения.

• <figcaption>: заголовок или сводка для содержимого <figure>. Если у <figure> нет дочернего <figcaption>, то нет и заголовка.

Содержимым у <figure> может быть изображение или что угодно ещё, например, таблица или список. В<figcaption> можно указать описательную метку для фрагмента контента: таблицы, фрагмента кода, списка, цитаты, текста и изображения, но это описание не является жизненно важным для его понимания.

• <figcaption> необязательный и может отсутствовать.

• <figcaption> может идти до или после содержимого.

• <figcaption> может быть всего лишь один у <figure>, но при этом содержимое у <figure> может иметь несколько элементов.

• <figcaption> не должен описывать изображение и не должен использоваться вместо альтернативного текста.

Пример из спецификации:

<figure>
    <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
    <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
    <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
    <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

Какими должны быть alt и figcaption для этой картинки с попугаями?

Плохой пример

<figure>
    <img src="popug.jpg" width="400" height="200" alt="">
    <figcaption>Разноцветный попугай сидит с друзьями на веточке.</figcaption>
</figure>

Правильный пример

<img src="popug.jpg" width="400" height="200" alt="Разноцветный попугай сидит с друзьями на веточке.">

Есть и более подходящий правильный пример:

<figure>
    <img src="sinica-v-rukah.jpg" width="400" height="200" alt="Большая синица.">
    <img src="popug.jpg" width="400" height="200" alt="Варакушка.">
    <img src="popug.jpg" width="400" height="200" alt="Голубая сорока.">
    <figcaption>Птицы России</figcaption>
</figure>

Итог

• Используйте alt для функционального описания, такого, которое точно объясняет, что находится на изображении.

• Используйте в <figcaption> редакционное или иллюстративное описание. Такое описание передаёт информацию о том, почему изображение используется. Это добавляет контекст для содержимого страницы.

Как понять, что такое функциональное описание, а что редакционное? Посмотрим на пример:

Функциональное описание (alt): мужчина смотрит в монитор и пытается понять, что происходит.

Редакционное: Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса "HTML и CSS. Профессиональная вёрстка сайтов".

<figure>
    <img src="author.jpg" width="400" height="200" alt="Мужчина смотрит в монитор и пытается понять, что происходит.">
    <figcaption>Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса "HTML и CSS. Профессиональная вёрстка сайтов".</figcaption>
</figure>

Больше про alt-текст

• 6 простых правил хорошего alt-текста

• Как правильно написать alt-текст

• Онлайн-тренажер про атрибут alt