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

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

И чтобы изображение было доступно, оно должно иметь альтернативный текст, а в некоторых случаях — подпись и подробное описание. Альтернативный текст — это краткое описание содержимого картинки, которое помещается внутрь атрибута alt у тега <img> или в тег <title> у тега <svg>. В первую очередь альтернативный текст нужен скринридерам и поисковым роботам, но, если картинка не загрузилась, его увидят и другие пользователи.

Подпись — это дополнительная информация о картинке, которая видна всем пользователям. Она помогает понять содержание изображения. Обычно подпись добавляют под картинку. Это может быть краткий комментарий к картинке, информация об авторе или дате создания. Для подписей используется тег <figcaption>.

Подробное описание — это текст, который детально описывает важные детали. Например, в нём можно описать статистику, если это изображение с графиком. Подробное описание может быть размещено под, над или сбоку от картинки. Обычно это простой параграф <p>, который иногда связывается с картинкой с помощью ARIA-атрибутов, aria-describedby или aria-details.