Альтернативний текст і WCAG: як описувати зображення, з прикладами

Оновлено 14 жовтня 2026 · 8 хв читання

Кожне зображення на сторінці потребує рішення: що має почути людина, яка його не бачить? Для цього й існує альтернативний текст (alt). Програми зчитування з екрана озвучують його, пошукові системи його використовують, а браузери показують, коли зображення не завантажилося. WCAG не приписує точного формулювання, але ставить чітку вимогу, а W3C публікує практичний посібник, як її виконати. На цій сторінці підсумовано обидва джерела з прикладами з інтернет-магазинів.

Це загальна інформація, а не юридична консультація.

Що вимагає WCAG

Вимога — це 1.1.1 Нетекстовий вміст, рівень A: увесь нетекстовий вміст, що подається користувачеві, має текстову альтернативу, яка виконує еквівалентне призначення. Є винятки. Елементи керування потребують назви, що описує їхнє призначення; мультимедіа в часі, тести, сенсорні враження й CAPTCHA потребують лише описової ідентифікації; а декорацію, форматування чи невидимий вміст потрібно реалізувати так, щоб допоміжні технології могли їх ігнорувати.

Тісно пов'язані ще два критерії:

1.4.5 Зображення тексту (AA): використовуйте справжній текст замість тексту, «запеченого» в картинку, якщо тільки користувач не може налаштувати зображення тексту або конкретне оформлення не є суттєвим; логотипи вважаються суттєвими.
2.4.4 Призначення посилання (в контексті) (A): якщо зображення — єдиний вміст посилання, його альтернативний текст і є текстом посилання.

Ключове слово — призначення. У документі W3C «Understanding» показано, що одна й та сама картинка глобуса потребує «Міжнародні подорожі» на одному сайті та «Міжнародні кампуси» на іншому. Вирішує контекст, а не пікселі.

Дерево рішень W3C у п'яти запитаннях

Дерево рішень для alt від W3C ставить запитання в такому порядку:

Чи містить зображення текст? Якщо той самий текст є поруч як справжній, або текст — лише візуальний ефект, використайте порожній alt. Якщо це іконка з функцією, опишіть функцію. В інших випадках alt містить текст зображення.
Чи є зображення посиланням або кнопкою, і чи було б його призначення неясним без нього? Тоді alt описує пункт призначення або дію.
Чи додає зображення сенсу? Просте фото чи графіка отримує короткий опис цього сенсу; діаграма чи схема потребують інформації ще й деінде на сторінці; зображення, що повторює сусідній текст, отримує порожній alt.
Чи воно суто декоративне? Тоді використайте порожній alt.
Нічого з переліченого? Дерево не охоплює всіх випадків; дивіться повний посібник із зображень.

Інформативні зображення

Фото й ілюстрації, що несуть інформацію, отримують короткий опис суттєвої інформації, як це формулює посібник W3C. У магазині це здебільшого фото товарів.

Зображення	Слабкий alt	Кращий alt
Головне фото товару	`IMG_4521.jpg`	`Синя льняна сорочка, вигляд спереду`
Друге фото того самого товару	`Синя льняна сорочка`	`Синя льняна сорочка, спинка з однією складкою`
Фото, що показує розмір	`Сумка`	`Сумка-шопер на моделі: сягає від плеча до стегна`
Зразок кольору, що змінює головне фото	`зразок`	`Шавлієво-зелений` (це елемент керування: назвіть вибір)

Наші рекомендації понад вимоги WCAG: скажіть, що людина інакше втратила б, — колір, матеріал, деталь, заради якої існує фото. Не починайте з «зображення»; програми зчитування з екрана вже оголошують зображення. Будьте стислими, а довгі специфікації розмістіть в описі товару, де їх може прочитати кожен.

Декоративні зображення

Фонові текстури, розділювачі, настроєві картинки поруч із заголовком, який уже все каже: використовуйте alt="" (порожній атрибут) або CSS-фон. Порожній alt наказує програмам зчитування з екрана пропустити зображення. Пропуск атрибута — не те саме: без нього програми зчитування з екрана можуть прочитати назву файлу чи URL.

Будьте обережні зі словом «декоративне». Лайфстайл-фото на посадковій сторінці може бути декоративним; те саме фото на сторінці товару, що показує, як товаром користуватися, — ні.

Функціональні зображення: посилання, кнопки й іконки

Коли зображення — єдиний вміст посилання чи кнопки, його alt називає пункт призначення або дію, а не картинку. У посібнику W3C про функціональні зображення наведено такі приклади:

логотип, що веде на головну: «W3C, головна», а не «логотип»;
лупа на кнопці пошуку: «Пошук»;
іконка принтера: «Друкувати цю сторінку», а не «принтер».

У магазині та сама ідея дає «Кошик», «Видалити з кошика», «Наступне фото», «Додати до списку бажань». Якщо іконка стоїть поруч із видимим текстом, який уже це каже, — іконка кошика, за якою йде слово «Кошик», — сама іконка отримує порожній alt або ховається від допоміжних технологій, щоб назва не озвучувалася двічі.

Логотипи

Логотип як єдиний вміст посилання на головну: alt каже, куди веде посилання, наприклад «Example Shop, головна».
Логотип поруч із назвою компанії текстом у тому самому посиланні: порожній alt, бо текст уже називає компанію.
Логотипи партнерів чи платіжних систем: alt називає бренд («Visa», «Trusted Shops»), бо логотип несе цю інформацію.

Логотипи також звільнені від вимоги до контрасту й від 1.4.5 «Зображення тексту».

Зображення тексту

Банери розпродажу зі знижкою, написаною в самій картинці, — класичний випадок для магазинів. За 1.4.5 такий текст має бути справжнім HTML-текстом поверх зображення, де це можливо, щоб його можна було масштабувати, перефарбовувати й перекладати. Якщо зображення тексту залишається, посібник W3C каже, що текстова альтернатива має містити ті самі слова, що й зображення, — цілком «Літній розпродаж −30 % до 31 серпня», а не «банер».

Складні зображення та групи

Діаграми, таблиці розмірів у вигляді картинок, інфографіка: короткий alt, що каже, що це, плюс повна інформація текстом або таблицею поруч. W3C радить надавати вихідні дані, де це практично.
Групи зображень, як-от п'ять зірок рейтингу: одна альтернатива на всю групу («Оцінка 4 з 5»), решта зображень — порожні.

Що знаходить автоматична перевірка зображень

Наші перевірки використовують правила axe-core для текстових альтернатив у справжньому браузері. Вони знаходять:

зображення без жодної текстової альтернативи (image-alt);
кнопки-зображення без опису (input-image-alt);
елементи з роллю зображення та SVG-графіку без текстової альтернативи (role-img-alt, svg-img-alt) — зірки рейтингу, іконки, бейджі;
ділянки карт зображень без опису (area-alt) і вбудовані об'єкти без нього (object-alt);
посилання й кнопки без доступної назви, що часто означає іконку без мітки;
як найкращу практику, альтернативний текст, що повторює видимий текст поруч (image-redundant-alt).

Чого не може оцінити жоден автоматичний інструмент: чи «Синя льняна сорочка» — правильний опис, чи справді декоративне зображення, позначене як таке, і чи містить банер текст. Це потребує людини. Докладніше — у бібліотеці правил.

Як перевірити свої зображення

Запустіть безкоштовний WCAG-чекер на сторінці товару й сторінці категорії; він перелічує зображення без альтернатив зі скриншотом кожного.
Прочитайте альтернативні тексти основних шаблонів: товар, категорія, головна, кошик.
Увімкніть програму зчитування з екрана або перегляньте дерево доступності в інструментах розробника браузера й послухайте одну сторінку товару.
Спочатку виправте шаблон, потім зображення: більшість систем магазинів дає змогу задати альтернативний текст для кожного фото товару в адмінці.

Наші перевірки — це автоматична перевірка, а не повний аудит і не юридична консультація. Інші критерії зображень і кольору — в нашому огляді WCAG та чек-листі WCAG 2.2.

Часті запитання

Що WCAG каже про альтернативний текст?

Критерій успіху 1.1.1 «Нетекстовий вміст» (рівень A) вимагає текстової альтернативи, що виконує еквівалентне призначення, для всього нетекстового вмісту. Декоративні зображення мають бути реалізовані так, щоб допоміжні технології могли їх ігнорувати, зазвичай — порожнім атрибутом alt.

Коли альтернативний текст має бути порожнім?

Коли зображення суто декоративне або коли та сама інформація вже є текстом поруч, наприклад логотип біля видимої назви компанії в тому самому посиланні. Використовуйте alt="" — пропуск атрибута є помилкою, бо програми зчитування з екрана можуть прочитати назву файлу.

Як написати альтернативний текст для кнопки-іконки?

Описуйте дію, а не картинку: «Пошук» для лупи, «Друкувати цю сторінку» для принтера, «Видалити з кошика» для смітника. Перші два приклади наведено в посібнику W3C із зображень.

Чи може перевірка зображень сказати, що мій альтернативний текст хороший?

Лише частково. Автоматичні перевірки знаходять зображення, кнопки-зображення, SVG-графіку й ділянки карт зображень без жодної текстової альтернативи, а також альтернативний текст, що повторює сусідній текст. Чи справді текст описує зображення, має оцінити людина.

Чи дозволені за WCAG зображення тексту?

На рівні AA критерій 1.4.5 «Зображення тексту» вимагає використовувати справжній текст замість тексту в картинках, де це дозволяє технологія. Логотипи — виняток. Якщо ви використовуєте зображення тексту, його альтернативний текст має містити ті самі слова.

Джерела

W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/