Доступность - разница междуи <figcaption>

Question

Существует два способа указать «сопровождающий текст» с изображениями в HTML:

• alt атрибут
• отдельный элемент <figcaption>.

Пример из w3s :

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

С точки зрения доступности, в чем разница между этими двумя? Какие подходящие значения нужно поместить в эти слоты? Например, alt должно быть визуальным описанием изображения, а <figcaption> контекстным описанием?

Вклад от пользователей с нарушениями зрения будет принята с благодарностью! Дополнительные предложения приветствуются.

Answer 1

Заголовок предоставляет информацию об изображении - для всех пользователей.

Альтернативный текст заменяет изображение, когда изображение не может быть отображено (например, потому что пользователь слеп, или изображение не загружалось, потому чтопользователь прошел через туннель).

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

Некоторые изображения являются полностью декоративными (alt="") или содержат только информацию, также передаваемую через близлежащий текст (alt=""). Многие веб-сайты отображают логотип компании на странице, поскольку информация, передаваемая изображением рядом со значком меню на сайте Новостей Google, состоит в том, что это сайт Новостей Google (alt="Google News"), а не в том, что изображение содержит логотип Google New. (т. е. не alt="Logo" или alt="Google News Logo").

Answer 2

Я слепой пользователь. Я бы сказал, что в Интернете есть две большие категории изображений:

• Функциональные изображения
• Иллюстративные изображения или цифры

Как следует из названия,figcaption это подпись к рисунку. Надпись всегда видна всем, а не только слепым. Рисунки - это изображения, которые можно найти в книге, статье или любых более или менее длинных абзацах текста. В большинстве случаев цифры носят чисто иллюстративный характер.

Когда вы используете figcaption, атрибут alt, вероятно, должен быть пустым:

• Копирование текста figcaption в атрибут alt илилюбая сокращенная версия почти всегда бесполезна: программа чтения с экрана будет считывать дважды одинаковую или почти одинаковую информацию и абсолютно ничего не стоит
• Вы можете подумать, что атрибут alt может быть полезен для более подробного описанияизображение, которое не вписывается в figcaption;например, подробное описание диаграммы или диаграммы. Но на самом деле этот вид описания лучше ниже изображения или на другой странице (тогда он доступен для всех), чем в атрибуте alt. Атрибут alt обычно должен оставаться коротким.
• Вы можете подумать, что figcaption бесполезен и только установить атрибут alt в что-то. Пример: «Фотография с Алисой слева, Бобом справа». Но на самом деле зрячие люди могут найти эту информацию полезной, если они не знают, например, Алису и Боба. Так что было бы интересно перенести это описание в figcaption, чтобы от него выиграли все, а не только слепые люди.

Теперь самый большой случай, когда вы не будете использовать figure / figcaption, это когдаизображения являются функциональными: кнопка может быть нажата, значок с точным значением и т. д. Основные правила для альтернативных текстов функциональных изображений:

• Если вы можете взаимодействовать с изображением для выполнения действий(щелкните и т. д.) или, если значок передает информацию, тогда необходимо установить непустой alt . Это должно быть описание функции , а не объективное описание изображения.
  Пример 1: «Вернуться назад» - это хорошо, а «Синяя стрелка влево» - плохо.
  Пример 2: «Непрочитанное сообщение »- это хорошо, а« Закрытый конверт »- плохо
• В противном случае, если изображение не обеспечивает взаимодействия и если оно не передает никакой информации, оно является иллюстративным;в этом случае alt должен быть пустым

Answer 3

Как указано в терминах, они отличаются от того факта, что один является alt ирнативным (когда изображение не видно), в то время как другой является ( fig ) заголовок (и всегда видимый).

заголовок - это информация, которую вы хотите видеть. Например, авторское право, имя автора, название объекта. Например, указание авторского права в атрибуте alt совершенно бесполезно (за исключением SEO).

Атрибут alt будет доступен для замены содержимого изображения. Например, если ваше изображение является логотипом с названием вашей компании, alt будет содержать это как текстовую альтернативу.