Размещение баннеров на официальных сайтах органов государственной власти и органов местного самоуправления (ОИВ) — это не только вопрос информационного дизайна, но и строгого соблюдения законодательства в сфере обеспечения доступности информационных ресурсов для людей с инвалидностью и ограничениями жизнедеятельности (ОВЗ)․ Учитывая актуальные изменения в нормативной базе, вступившие в силу с , подход к оформлению и технической реализации баннеров требует пересмотра․

Нормативная правовая основа

Ключевым документом, регламентирующим требования к доступности веб-ресурсов госсектора, является ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме․ Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы․ Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности»․

• Статус: Национальный стандарт Российской Федерации․
• Утвержден: Приказом Федерального агентства по техническому регулированию и метрологии (Росстандарт) от 29 августа 2019 г․
• Вступил в силу: 14 июня 2022 г․
• Разработчик: ФГУП «Российский научно-технический центр информации по стандартизации, метрологии и оценке соответствия» (ФГУП «СТАНДАРТИНФОРМ») и авторский коллектив независимых экспертов (Ю․А․ Божор, В․Н․ Довыденков, А․В․ Зеленов, А;Н․ Камынин, А․Д․ Попко, В․В․ Рудницкая и др․)․

Данный стандарт разработан на базе международных рекомендаций WCAG (Web Content Accessibility Guidelines) и является обязательным для исполнения федеральными органами власти, органами власти субъектов РФ и органами местного самоуправления․

Специфика баннеров в контексте ГОСТ Р 52872-2019

Хотя стандарт является высокоуровневым и применимым ко всем видам цифрового контента, баннеры (как статические изображения, так и слайдеры/карусели) попадают под определение «нетекстового контента» и «интерактивных компонентов»․ Соответственно, к ним применяются следующие ключевые критерии успеха:

Текстовые альтернативы (Альтернативный текст — Alt-text)

Любой баннер, несущий смысловую нагрузку (информационный, навигационный, призывающий к действию), обязан иметь текстовый эквивалент, передаваемый через атрибут alt тега <img> или через ARIA-метки (aria-label, aria-labelledby)․

• Декоративные баннеры: Если баннер является чисто декоративным и не несет новой информации, он должен быть скрыт от вспомогательных технологий (alt="" или role="presentation")․
• Информационные баннеры: Текст на изображении должен быть полностью продублирован в атрибуте alt․ Если текст слишком объемен, используется ссылка на страницу с полным описанием (longdesc или ссылка рядом)․

Контрастность и визуальное восприятие

Согласно требованиям (соответствует WCAG 1․4․3 Contrast Minimum), соотношение контрастности текста и изображений текста на баннере должно быть не менее 4․5:1 (для крупного текста, не менее 3:1)․ Это критично для пользователей с нарушениями зрения (слабовидящих)․

• Запрещено использование цветовых сочетаний, неразличимых при дейтеранопии/протанопии (красно-зеленые и сине-желтые пары без достаточной разницы в яркости)․
• Текст на баннере не должен быть встроен в растровое изображение низкого качества, теряющий читаемость при масштабировании․

Масштабируемость и адаптивность (Reflow)

Баннер должен сохранять функциональность и читаемость при увеличении масштаба страницы до 200% и при ширине экрана 320 CSS пикселей (эквивалент мобильного устройства) без появления горизонтальной прокрутки (критерий 1․4․10 Reflow)․ Использование фиксированных ширины/высоты в пикселях для контейнеров баннеров недопустимо․

Управление анимацией и автовоспроизведением (Pause, Stop, Hide)

Если баннер реализован как карусель (слайдер) с автоматической сменой слайдов, обязательно наличие доступных элементов управления:

1. Кнопка «Пауза/Стоп» (доступная с клавиатуры и скринридеров)․
2. Автоматическая остановка анимации при наведении фокуса клавиатуры или наведения курсора мыши․
3. Длительность показа слайда должна быть достаточной для прочтения текста (рекомендуется не менее 5-7 секунд на слайд средней насыщенности)․

Важно: Вспышки и мигание контента более 3 раз в секунду запрещены (риск фоточувствительной эпилепсии)․

Клавиатурная доступность (Keyboard Accessible)

Все интерактивные элементы баннера (ссылки, кнопки «Подробнее», переключатели слайдов) должны быть достижимы и управляемы с клавиатуры (Tab, Enter, Space, стрелки)․ Порядок фокуса должен быть логичным и интуитивным․ Видимый индикатор фокуса (outline) нельзя удалять CSS-свойством outline: none без замены на видимый альтернативный стиль․

Изменения с : расширение круга нозологий

Согласно экспертным разъяснениям (в т․ч․ публикациям на Хабр и разборам Cetera Labs), к указанной дате вступили в силу требования, расширяющие круг обязательно учитываемых нарушений․ Ранее фокус был преимущественно на нарушениях зрения․ Теперь требования обязательно охватывают:

• Нарушения слуха (подписи к видео-баннерам, транскрипты)․
• Нарушения опорно-двигательного аппарата (управление без мыши, увеличенные цели для нажатия — минимум 44×44 CSS пикселя)․
• Нарушения речи․
• Ментальные и неврологические нарушения (простота языка, предсказуемость навигации, отсутствие сложных анимаций)․

Это означает, что баннеры с видео-контентом обязаны иметь субтитры/закрытые подписи (Closed Captions) и, по возможности, тифлокомментирование (согласно ГОСТ Р 57891)․

Техническая реализация: чек-лист для разработчика и контент-менеджера

Версия для слабовидящих и баннеры

Многие сайты администраций используют виджет «Версия для слабовидящих» (переключение цветовой схемы, увеличение шрифта, отключение картинок)․

• Проблема: Часто виджеты ломают верстку баннеров (накладывают слои, скрывают кнопки управления слайдером, нарушают контраст при инверсии цветов)․
• Решение: Основная версия сайта (без виджета) должна быть доступной сама по себе (Universal Design)․ Виджет — это дополнительная мера, а не замена соблюдению ГОСТ Р 52872-2019․ Баннеры должны корректно реагировать на пользовательские стили (User Stylesheets) и режимы высокой контрастности ОС (Windows High Contrast Mode, macOS Increase Contrast)․ Используйте CSS-переменные (custom properties) для цветов, чтобы они переопределялись системой пользователя․

Ответственность и контроль

Несоответствие сайта администрации требованиям ГОСТ Р 52872-2019 (в части баннеров и прочих элементов) влечет за собой:

• Нарушение Федерального закона от № 210-ФЗ «Об организации предоставления государственных и муниципальных услуг» (статья 16․1)․
• Претензии от прокуратуры и Роскомнадзора по результатам плановых и внеплановых проверок доступности;
• Административная ответственность должностных лиц (ст․ 5․27 КоАП РФ — нарушение трудового законодательства в части прав инвалидов, по аналогии)․
• Репутационные риски и невозможность использования сайта целевой аудиторией․

Рекомендации по контент-стратегии для баннеров

1. Отказ от сложных слайдеров․ Статический баннер с одной призывной кнопкой (Call to Action) доступнее и эффективнее карусели, которую пользователи часто игнорируют (феномен «баннерной слепоты») и которая создает барьеры для когнитивных нарушений․
2. Тестирование с реальными пользователями․ Включите в процесс тестирования людей с разными нозологиями (эксперты по доступности)․ Автоматические чекеры (axe, Lighthouse) находят только ~30-40% ошибок․
3. Документирование․ В соответствии с п․ 5 ГОСТ Р 52872-2019, организации должны документировать способы обеспечения доступности․ Ведите реестр баннеров с указанием: дата публикации, автор контента, результат аудита доступности (пройден/не пройден), ссылка на отчет․

Баннер на сайте администрации, это не просто графический элемент, а функциональный интерфейс, предоставляющий гражданам доступ к социально значимой информации․ Соблюдение ГОСТ Р 52872-2019 и актуальных требований с гарантирует, что информация о мерах поддержки, графиках приема, изменении режима работы или чрезвычайных ситуациях станет доступна всем категориям граждан без исключения․