WCAG 1.1.1 Нетекстовий вміст

Критерій успіху 1.1.1 потрібен для того, щоб люди, які не бачать зображення, усе одно отримали інформацію, яку воно несе. Користувачі програм зчитування з екрана чують альтернативний текст, і його ж бачать ті, у кого зображення не завантажилися. Це рівень A, перший критерій WCAG, і він входить до EN 301 549 (пункт 9.1.1.1; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Увесь нетекстовий вміст — зображення, іконки, діаграми, кнопки-зображення, SVG — повинен мати текстову альтернативу, яка виконує рівнозначну функцію. Для деяких типів вмісту WCAG вимагає менше:

• Елементи керування та введення: зображення, яке є кнопкою або приймає введення, потребує назви, що описує його призначення («Додати до обраного», а не «сердечко»).
• Мультимедіа, що розгортаються в часі (відео, аудіо): текстова альтернатива має щонайменше їх ідентифікувати; субтитри й описи регулюють критерії 1.2.x.
• Тести, які втратили б сенс у текстовому вигляді, і вміст, створений для сенсорного враження (наприклад, музичний твір): щонайменше описова ідентифікація.
• CAPTCHA: текстова альтернатива, що описує її призначення, і альтернативна CAPTCHA, яка використовує інше чуття (наприклад, аудіо на додачу до візуальної).
• Декор, форматування, невидимий вміст: має бути реалізований так, щоб допоміжні технології могли його ігнорувати — у HTML це alt="" або фонове зображення в CSS.

Типові помилки в інтернет-магазині

• фото товарів без alt або з назвою файлу (IMG_4021.jpg), яку зачитує програма;
• кнопки пошуку, кошика, акаунта чи закриття лише з іконкою і без доступної назви;
• промобанери з пропозицією («−30 % у ці вихідні»), вшитою в зображення, без альтернативного тексту;
• значки оплати й довіри, таблиці розмірів або зірочки рейтингу лише у вигляді зображень;

Як перевірити

Автоматично: наш сканер знаходить зображення, поля введення типу image, об'єкти, SVG та елементи з role="img" без текстової альтернативи, а також індикатори прогресу та вимірювачі без назви (правила alt для зображень, alt для input type="image", alt для SVG-зображень та пов'язані). Він не може оцінити, чи правильний наявний альтернативний текст, тож відсутність знахідок не означає, що критерій виконано.

Вручну: вимкніть зображення в браузері або скористайтеся програмою зчитування з екрана і пройдіть сторінку товару. Для кожного зображення запитайте себе: чи альтернативний текст передає ту саму інформацію, чи це декор, який мовчить? Кнопки-іконки перевіряйте, переходячи до них клавішею Tab і слухаючи їхню назву.

Як виправити

• Додайте альтернативний текст у редакторі товару вашої платформи (Shopify, WooCommerce та більшість інших мають поле «alt text» для кожного медіафайлу).
• Описуйте те, що важливо в контексті: «Синя лляна сорочка, вигляд ззаду», а не «сорочка».
• Дайте кнопкам-іконкам видиму мітку або aria-label; саму іконку приховайте від допоміжних технологій.
• Для суто декоративних зображень використовуйте alt="", а не пропущений атрибут.
• До діаграм та інфографіки додайте коротке резюме або таблицю з даними.

Пов'язані критерії

• 1.4.5 Зображення тексту — використовуйте справжній текст замість тексту на картинках.
• 1.2.1 Лише аудіо та лише відеовміст (у записі) — альтернативи для медіафайлів.
• Безкоштовна перевірка однієї сторінки — знайдіть зображення без альтернативного тексту на своєму сайті.

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

Чи кожному зображенню потрібен альтернативний текст за WCAG?

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

Що писати в альтернативному тексті фото товару?

Те, що покупцеві треба дізнатися із зображення: який це товар і який колір, візерунок чи деталь видно на фото. Не починайте з «зображення…» і не повторюйте дослівно назву товару, якщо вона стоїть поруч із фото.

Чи стосується 1.1.1 кнопок-іконок?

Так. Елемент керування на кшталт лупи, кошика чи хрестика має мати назву, яка описує його призначення, наприклад «Пошук» або «Відкрити кошик». Критерій 4.1.2 «Назва, роль, значення» додає ще вимоги до елементів керування.

Чи може автоматичний сканер перевірити альтернативний текст?

Він знаходить зображення, іконки та SVG зовсім без текстової альтернативи. А от чи точний і корисний наявний альтернативний текст, сканер не визначить — для цього потрібна людина.