Баннер, по которому можно попасть: контраст, размер кнопки и управление с клавиатуры
В сентябре 2026 года рекламный баннер по-прежнему часто проверяют двумя вопросами: заметен ли он и ведет ли ссылка на нужную страницу. Этого мало. Бледный текст не прочитает человек со сниженной контрастной чувствительностью, маленький крестик трудно нажать в движущемся транспорте, а компонент без клавиатурного фокуса остается недоступным без мыши. Требования доступности не делают рекламу скучной - они убирают препятствия между предложением и аудиторией.
Главное сообщение должно быть текстом
Если заголовок, цена и срок нарисованы внутри JPEG, браузер не может нормально увеличить их отдельно, программа чтения с экрана не получает структуру, а контраст трудно адаптировать. Поместите смысловой текст в HTML, оставив картинке декоративную или иллюстративную роль. Логотип может оставаться изображением, но предложение и действие должны быть доступны как обычное содержимое.
Атрибут alt описывает функцию информативной картинки, а не перечисляет каждый цвет. Для декоративного фона нужен пустой alt или CSS-фон, чтобы вспомогательная программа не читала имя файла. Если весь баннер является ссылкой и изображение передает единственный текст акции, альтернативное описание должно сообщить назначение ссылки. Не повторяйте рядом одно и то же сообщение в alt и видимом тексте.
Контраст считают, а не оценивают на глаз
WCAG 2.2 устанавливает для обычного текста минимальное соотношение контраста 4.5:1, для крупного - 3:1. Логотипы имеют исключение, но цена, срок и кнопка логотипом не становятся. Проверяйте реальные пары цветов после наложения фотографии, градиента и полупрозрачного слоя. Белый текст на затемненном фото может проходить в одном месте и теряться на светлом участке рядом.
Не кодируйте смысл только цветом. Красная и зеленая точки без подписей плохо объяснят доступность тарифа людям с особенностями цветового зрения. Добавьте слова, значок с понятным текстовым эквивалентом или различимую форму. Состояние наведения тоже не должно быть единственным способом увидеть, что элемент кликабельный.
Кнопка - это площадь, а не надпись
Критерий WCAG 2.2 Target Size (Minimum) использует ориентир не менее 24 на 24 CSS-пикселя с предусмотренными исключениями, в том числе для достаточного расстояния между маленькими целями. Это минимум соответствия, а не идеальный размер для рекламы. На телефоне кнопку часто стоит делать крупнее, чтобы по ней можно было попасть большим пальцем.
Проверьте всю кликабельную область инструментами разработчика. Бывает, что цветной прямоугольник выглядит большим, но ссылка охватывает только короткое слово внутри. Увеличьте внутренние отступы самой ссылки. Если рядом стоят Закрыть и Подробнее, разведите цели, чтобы случайное касание не отправляло пользователя на рекламную страницу.
Клавиатура обнаруживает скрытые ошибки
Отложите мышь и нажимайте Tab от начала страницы. Фокус должен дойти до баннера в логичном порядке, быть хорошо заметным и не застревать внутри карусели. Enter активирует ссылку или кнопку. Если есть закрытие, пауза или переключение слайдов, каждое действие доступно с клавиатуры и имеет понятное имя.
Не убирайте стандартный контур фокуса ради чистого дизайна, не предложив равноценную замену. Контур должен отличаться и от кнопки, и от фона вокруг нее. Проверьте первый и последний слайд: скриптовая карусель иногда отправляет фокус на скрытый элемент после автоматического переключения.
Движение не должно захватывать внимание навсегда
Бесконечная анимация мешает читать основной материал и может вызывать дискомфорт. Ограничьте число повторов, добавьте паузу для сложного движения и учитывайте системное предпочтение reduced motion. В этом режиме можно оставить мягкую смену цвета или статичный ключевой кадр вместо параллакса и резких перелетов.
Автоматическая карусель не должна менять слайд раньше, чем пользователь успел прочитать текст. Остановка при наведении помогает мыши, но не клавиатуре и не сенсорному экрану. Нужна явная пауза, а лучше - спокойный первый кадр с ручным управлением, если несколько сообщений действительно необходимы.
Одна ссылка или много элементов
Если баннер ведет в одно место, одна смысловая ссылка вокруг содержимого часто понятнее нескольких одинаковых Подробнее. Но внутрь ссылки нельзя бездумно помещать другие интерактивные элементы. Если есть закрытие, выбор тарифа и просмотр условий, проектируйте компонент как группу отдельных контролов с ясными названиями.
Текст ссылки должен объяснять результат: Посмотреть условия тарифа информативнее, чем Узнать больше, особенно когда на странице несколько баннеров. Предупредите о необычном действии - скачивании файла, открытии приложения или переходе к оплате.
Проверка перед сдачей
Увеличьте страницу до 200 процентов и убедитесь, что текст не обрезан. Пройдите компонент клавиатурой. Запустите автоматическую проверку контраста, затем вручную проверьте фотофоны и состояния hover, focus, active и disabled. Откройте баннер с отключенным изображением: предложение и ссылка должны оставаться понятными. Включите reduced motion и убедитесь, что информация не исчезла вместе с анимацией.
Наконец, дайте компонент человеку, который не видел макет, и попросите назвать предложение, срок и результат нажатия. Если для ответа приходится угадывать, проблема не в пользователе. Доступный баннер честно сообщает главное, позволяет спокойно прочитать текст и дает надежную цель для любого способа управления.