Для зображення може знадобитися кілька видів опису. Інструкція щодо розміщення повідомляє конструктору, як використати зображення. Видимий підпис пояснює читачам контекст. Альтернативний текст передає важливий візуальний зміст людям, які не можуть бачити зображення. Ці ролі можуть перетинатися, але вони не взаємозамінні.
Поясніть конструктору, що ви маєте на увазі
Опишіть, що зображено і навіщо ви додаєте це зображення. Наприклад: «Це стілець, який я відреставрував. Розмісти його поруч із проєктом реставрації, після зображення „до“». Додайте важливі побажання щодо кадрування. Не просіть конструктора робити висновки про схвалення клієнта, місце чи характеристики продукту, якщо ваші факти цього не підтверджують.
Використовуйте підписи, щоб додати контекст
Підпис може називати проєкт, указувати дату або пояснювати, який етап зображено. Він має додавати корисну інформацію, а не повторювати заголовок. Якщо зображення показує вигадану концепцію або тренувальний проєкт, чітко позначте цей контекст. Перевірте імена й дати перед публікацією.
Описуйте зміст, а не кожен піксель
Альтернативний текст має передавати, що саме зображення дає в цьому контексті. Для фотографії проєкту може знадобитися короткий опис готового виробу. Декоративний елемент можна залишити з порожнім альтернативним текстом, щоб його пропускали. Якщо зображення містить важливі інструкції чи ціни, додайте цю інформацію також як звичайний текст на сторінці.
Перевіряйте зображення разом із навколишнім розділом
Прочитайте заголовок, абзац, підпис і опис зображення разом. Усуньте повтори, які ускладнюють перегляд сторінки. Переконайтеся, що відвідувач може зрозуміти ключове повідомлення, навіть якщо зображення не завантажиться. Текст не має стверджувати, що зображення щось доводить, якщо на ньому цього не видно.
Додаючи зображення у VollSite, опишіть їхню роль і перевірте згенероване розміщення після завершення запитаної зміни. Зберігайте оригінальні файли окремо й використовуйте лише матеріали, які маєте право публікувати. Основні рекомендації з доступності дивіться на https://web.dev/learn/design/accessibility. Автоматизовані перевірки можуть виявити деякі відсутні описи, але людині все одно потрібно оцінити, чи передає формулювання правильний зміст.