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 не считает изображением текста текст, который является частью картинки с другим значимым визуальным содержимым, например этикетку на фото товара. Важные детали всё равно стоит указать в описании товара.