Независимый справочник о доступности сайтов. Не делаем сайты на заказ и не продаём хостинг; не связаны с прежним сайтом на этом домене.

Описание фото

Архивный адрес: как описать фотографию для незрячего читателя

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

Хорошее описание отвечает не на вопрос «что изображено», а на вопрос «зачем эта картинка здесь стоит».

— От редакции

Происхождение адреса

Архивный адрес · прежняя запись не сохранилась

Раньше по этому адресу была запись прежнего блога о популярном фотосервисе и истории его создания. Запись утрачена и не воспроизводится; к ней и к её автору справочник отношения не имеет.

Мы оставили адрес, чтобы поговорить о том, что объединяет любые фотографии в сети: их видят не все, и описание помогает тем, кто читает страницу на слух.

Зачем нужно описание

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

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

Как писать описание

  • Коротко: обычно хватает одной-двух фраз. Длинные подробности лучше вынести в подпись или основной текст.
  • О главном: опишите то, ради чего фотография поставлена на страницу, а не каждый предмет в кадре.
  • Без слов «изображение» и «картинка»: диктор и так сообщает, что это изображение, и повтор только тратит время слушателя.
  • С учётом страницы: одна и та же фотография в новости, в карточке товара и в статье об истории города требует разных описаний.
  • Если на картинке есть текст, перенесите его в описание целиком или продублируйте на странице.

Когда описание не нужно

  • Декоративные изображения — фоновые узоры, разделители, украшения — ничего не сообщают. Для них оставляют пустой альтернативный текст, и диктор их просто пропускает.
  • Если рядом с картинкой уже есть текст, который полностью её объясняет, повторять его в описании не нужно.
  • Значок рядом со словом, которое говорит то же самое, тоже можно оставить без описания, чтобы диктор не произносил одно и то же дважды.
  • Важно: пустой альтернативный текст и его отсутствие — не одно и то же. Без него диктор может прочитать имя файла.

Источники

  • W3C — рекомендации WCAG 2.2
  • Редакционные материалы справочника Wpget

Сведения изложены общими словами на дату подготовки. Рекомендации, браузеры и привычки читателей постепенно меняются, поэтому в спорных случаях сверяйтесь с первоисточниками: текстом рекомендаций WCAG и действующим ГОСТ Р 52872-2019.