Пишите полезные описания изображений для своего сайта

Для изображения может потребоваться несколько видов описания. Указание по размещению сообщает конструктору, как использовать изображение. Видимая подпись объясняет контекст читателям. Альтернативный текст передаёт важный визуальный смысл людям, которые не могут видеть изображение. Эти функции могут пересекаться, но они не взаимозаменяемы.

Объясните конструктору, что вы хотите

Опишите, что изображено и зачем вы добавляете это изображение. Например: «Это стул, который я отреставрировал. Размести его рядом с проектом реставрации, после изображения „до“». Укажите важные для вас предпочтения по кадрированию. Не просите конструктор делать выводы о рекомендации клиента, местоположении или характеристиках товара, если эти сведения не подтверждаются имеющимися фактами.

Используйте подписи для пояснения контекста

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

Описывайте смысл, а не каждый пиксель

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

Проверьте описание вместе с окружающим разделом

Прочитайте заголовок, абзац, подпись и описание изображения вместе. Удалите повторяющиеся формулировки, из-за которых страницу утомительно просматривать. Проверьте, сможет ли посетитель понять основную мысль, если изображение не загрузится. Текст не должен утверждать, что изображение доказывает то, чего на нём не видно.

Добавляя изображения в VollSite, укажите, какую роль они выполняют, и проверьте созданное размещение после завершения запрошенного изменения. Храните исходные файлы отдельно и используйте только материалы, которые вы вправе публиковать. Основные рекомендации по доступности см. на странице https://web.dev/learn/design/accessibility. Автоматическая проверка может выявить отсутствие некоторых описаний, но человеку всё равно нужно оценить, передаёт ли формулировка нужный смысл.