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

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

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

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

Винятки:

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

Логотипи (текст, що є частиною логотипа чи назви бренду) вважаються необхідними.

Із сучасними вебшрифтами та CSS майже будь-який типографічний вигляд можна створити справжнім текстом, тож винятки вузькі.

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

• банери на першому екрані й промобанери, де пропозиція, дати й умови є частиною JPG;
• плитки категорій, де назва категорії — на зображенні;
• таблиці розмірів, склад чи інструкції з догляду, завантажені як зображення;
• «Безкоштовна доставка від 50 €» або повідомлення про довіру у вигляді смуг-зображень;
• кнопки із зображень, що містять напис.

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

Автоматично: жодне автоматичне правило нашого сканера не відповідає цьому критерію. Інструмент не може надійно визначити, чи є на картинці текст. Тут потрібна ручна перевірка. Наш сканер повідомляє про зображення без альтернативного тексту за критерієм 1.1.1, і часто так знаходяться ті самі банери.

Вручну: збільште масштаб сторінки до 200–400 %: текст на зображеннях розмивається. Спробуйте виділити текст мишею: якщо не вдається, це, ймовірно, зображення. Пройдіть головну, сторінки категорій і товарів, а також цільові сторінки розсилок і складіть список усіх зображень зі словами. Для кожного вирішіть, чи можна отримати такий самий вигляд справжнім текстом.

Як виправити

• Робіть банери як фонове зображення з шаром тексту HTML поверх; більшість тем магазинів мають для цього секцію «слайдшоу» чи «зображення з текстом».
• Публікуйте таблиці розмірів і склад як таблиці чи списки HTML.
• Для особливої типографіки використовуйте вебшрифти замість зображень.
• Залишайте текст на зображеннях лише для логотипів і справді необхідних випадків і давайте їм альтернативний текст.

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

• 1.1.1 Нетекстовий вміст — альтернативний текст для зображень.
• 1.4.3 Контраст (мінімальні вимоги) — стосується й зображень тексту.
• 1.4.4 Зміна розміру тексту — текст має збільшуватися до 200 %.

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

Чи дозволені логотипи з текстом?

Так. Логотипи — текст, що є частиною логотипа чи назви бренду, — вважаються необхідними і є винятком. Альтернативний текст за 1.1.1 їм однаково потрібен.

Чи достатньо альтернативного тексту для банера з текстом?

Альтернативний текст виконує 1.1.1, але не 1.4.5. Якщо такого самого вигляду можна досягти текстом HTML і CSS, текст має бути справжнім, щоб користувачі могли його збільшувати, змінювати колір і перекладати.

Чи є проблемою фото товарів із надрукованим текстом?

Ні. WCAG не вважає зображенням тексту текст, що є частиною зображення з іншим важливим візуальним вмістом, як-от етикетка на фото товару. Важливі деталі все одно варто вказати в описі товару.