Красивый баннер, который не прочитали: проверка рекламы по WCAG 2.2 за 20 минут

Дизайнер открывает макет на хорошем мониторе. Белая тонкая надпись лежит на светлом небе, кнопка аккуратно поддерживает фирменный цвет, мелкие условия не спорят с фотографией. Все выглядит дорого. Затем объявление появляется на телефоне под солнцем, и пользователь видит только красивую картинку без цены, срока и понятного действия.

В сентябре 2026 года для проверки такого креатива не нужно изобретать личную шкалу вкуса. Web Content Accessibility Guidelines 2.2, опубликованные W3C, дают измеримые ориентиры для веб-контента. Они не являются инструкцией по медиапланированию и не гарантируют юридическое соответствие во всех странах. Зато помогают сделать рекламу читаемой для людей со слабым зрением, нарушением цветового восприятия, моторными ограничениями и просто уставшим экраном.

Минута 1-3. Назовите сообщение без картинки

Запишите на листе три вещи: что предлагается, почему сейчас и какое действие требуется. Если команда не может сформулировать это одной-двумя фразами, доступность пока нечего проверять. Сложный смысл нельзя спасти контрастом.

Затем временно отключите фоновую фотографию. Остаются ли название товара, цена или условие, срок и кнопка понятными? Цвет и изображение могут усиливать сообщение, но не должны быть единственным носителем критической информации.

Минута 4-7. Измерьте контраст, а не прищур

Критерий WCAG 2.2 уровня AA требует для обычного текста отношение контраста не ниже 4,5:1. Для крупного текста допустимо 3:1. Логотипы имеют отдельное исключение, но цена, призыв и условия логотипом не становятся только потому, что дизайнеру нужен более спокойный макет.

Проверяйте текст на самом сложном участке фона. Если белые буквы лежат на фотографии, измерение по темному углу не доказывает читаемость на светлом облаке. W3C описывает недостаточный контраст текста поверх фонового изображения как отдельный тип ошибки. Решения просты: однотонная подложка, затемнение, светлый блок, обводка достаточной толщины или перенос текста в стабильную область.

Минута 8. Уберите цвет и посмотрите, что потерялось

Сделайте снимок экрана черно-белым. Если скидка отличается от обычной цены только красным цветом, смысл исчез. Если обязательное поле отмечено только зеленой или красной рамкой, пользователь не понимает состояние. WCAG требует не использовать цвет как единственный визуальный способ передачи информации.

Добавьте текстовый знак: "Скидка", старую цену с понятным оформлением, подпись ошибки, значок с пояснением. Не полагайтесь только на перечеркивание или оттенок, особенно в маленьком мобильном макете.

Минута 9-11. Отделите текст от изображения

WCAG 2.2 рекомендует передавать информацию настоящим текстом, а не изображением текста, если нужный внешний вид можно получить средствами веб-технологий. Настоящий HTML-текст увеличивается, копируется, переводится и может быть прочитан вспомогательной программой. Надпись, запеченная в JPEG, этих свойств не имеет.

Внутри графического рекламного формата полностью отказаться от текста на картинке не всегда возможно. Тогда повторите ключевое предложение в доступном текстовом поле объявления и на посадочной странице. У изображения должен быть осмысленный текстовый эквивалент там, где платформа позволяет его задать. Не пытайтесь поместить в alt весь мелкий юридический текст: основные условия должны быть доступны обычным текстом рядом.

Минута 12-14. Увеличьте посадочную страницу до 200 процентов

Критерий Resize Text требует, чтобы текст можно было увеличить до 200 процентов без потери содержания и функций. Откройте лендинг на ширине обычного ноутбука, поставьте масштаб браузера 200 процентов и пройдите путь от заголовка до отправки формы.

Проверьте, не обрезалась ли цена, не уехала ли кнопка за край, можно ли прочитать подсказку поля и закрыть всплывающее окно. Особое внимание уделите фиксированным панелям: две липкие полосы сверху и снизу способны оставить пользователю узкую щель вместо страницы.

Минута 15-16. Попробуйте пройти рекламу клавиатурой

Нажимайте Tab, не используя мышь. Фокус должен последовательно попадать на ссылки, поля и кнопку, а его положение должно быть видно. Enter или пробел должны активировать элемент ожидаемым способом. Если фокус пропал под всплывающим баннером или перескакивает в непонятном порядке, часть аудитории не завершит действие.

Не делайте кликабельным весь декоративный блок без понятного названия. Ссылка "Подробнее" допустима рядом с ясным контекстом, но несколько одинаковых "Подробнее" на странице плохо объясняют назначение при навигации по ссылкам.

Минута 17. Проверьте движение и звук

Мигающий счетчик, автоматическая карусель и видео могут привлекать внимание, но также мешают прочитать предложение. Дайте возможность поставить длительное движение на паузу. Не запускайте голос или музыку без действия пользователя. В рекомендациях W3C звук длительнее трех секунд должен иметь механизм остановки или независимую регулировку.

Субтитры полезны не только людям с нарушением слуха. Рекламное видео часто смотрят без звука в транспорте и офисе. Но автоматические субтитры нужно вычитать: ошибка в цене или названии продукта меняет смысл.

Минута 18. Посмотрите на реальном маленьком экране

Не уменьшайте только окно дизайнера. Отправьте тестовую ссылку на обычный телефон, включите среднюю яркость и выйдите к окну. Проверьте, читается ли первое сообщение без увеличения, достаточно ли заметна кнопка и удобно ли попасть по ней пальцем.

Поверните экран, увеличьте системный шрифт и повторите форму. Важен не идеальный вид при каждой настройке, а сохранение информации и действия. Если подпись стала в две строки, это лучше, чем исчезнувшая половина слова.

Минута 19. Позовите человека, который не видел макет

Покажите экран на пять секунд и уберите. Спросите: что предлагали, было ли ограничение по времени и куда следовало нажать. Не объясняйте задумку. Если тестировщик запомнил атмосферу, но не товар, проблема находится не в его внимательности.

Затем дайте пройти путь полностью и попросите говорить вслух о сомнениях. Один живой тест не заменяет исследование аудитории, но быстро находит слова, которые команда считает очевидными только потому, что обсуждала их неделю.

Минута 20. Зафиксируйте исправления по приоритету

Красный приоритет: невозможно понять предложение, прочитать цену, увеличить текст, пройти форму или остановить мешающий контент. Желтый: смысл сохраняется, но чтение требует усилия. Зеленый: декоративное улучшение. Сначала исправляйте красное, затем желтое. Не тратьте оставшийся день на оттенок тени у уже читаемой кнопки.

Доступный креатив не обязан быть скучным. Контрастная типографика, ясная иерархия и настоящий текст дают дизайнеру устойчивый каркас. Реклама выигрывает не потому, что формально прошла список WCAG. Она выигрывает, когда больше людей успевают прочитать предложение, понять условия и выполнить действие без борьбы с макетом.