Руководство для издателей, глава 3
Всплывающие окна и согласие
Последняя проверка: ноябрь 2026
Каждое окно, которое появляется поверх статьи, стоит между читателем и тем, зачем он пришёл. Некоторые из них требует закон. Многие нет. В этой главе рассказано, чего просит Google, что говорят о согласии европейские регуляторы и как построить запрос, который работает с клавиатурой и программой чтения с экрана. Это не юридическая консультация, поэтому проверяйте свой баннер со своим юристом.
Чего просит Google
Google описывает навязчивые межстраничные элементы как элементы страницы, которые закрывают читателю обзор содержимого, и предупреждает, что они могут ухудшить позиции в поиске. Его рекомендации конкретны:
- Не закрывайте всю страницу.
- Не отправляйте читателя на отдельную страницу для согласия или ввода данных. Если каждый URL перенаправляет на одну страницу согласия, все страницы, кроме неё, могут пропасть из результатов поиска.
- Используйте баннеры, занимающие небольшую часть экрана, вместо полноэкранных межстраничных элементов.
- Так же аккуратно относитесь к рекламным окнам любого вида, включая приглашения подписаться на рассылку и установить приложение.
Для установки приложения Google указывает на варианты, которые поддерживает браузер, например Smart App Banners в Safari, или простой HTML-баннер со ссылкой на нужный магазин.
На межстраничные элементы, которые требуются по закону, эта рекомендация не распространяется. Пример Google: проверка возраста. Если она вам нужна, оставьте содержимое на странице под наложением, чтобы его по-прежнему можно было индексировать.
Better Ads Standards относятся к рекламе. Всплывающая реклама включена в список и для компьютера, и для телефона. На телефоне в списке есть рекламу prestitial как с обратным отсчётом, так и без него. На компьютере в списке формат prestitial с обратным отсчётом, а тот, который можно сразу закрыть, ниже стандарта не опускается.
Что говорят о согласии европейские регуляторы
Европейская коллегия по защите данных (EDPB) опубликовала руководство по согласию и отчёт своей рабочей группы по баннерам cookie. В отчёте рабочей группы зафиксирован минимальный порог, согласованный для рассмотрения жалоб, при этом национальные правила по-прежнему действуют, поэтому считайте эти пункты базовым уровнем.
- Ничто, требующее согласия, не запускается первым. Cookie, для которых нужно согласие, нельзя устанавливать, пока читатель не согласился активным действием.
- Прокрутка не является согласием. В руководстве сказано, что прокрутка или пролистывание ни при каких обстоятельствах не считаются ясным и однозначным действием.
- Заранее отмеченные флажки не являются согласием. То же относится к молчанию или простому продолжению пользоваться сервисом.
- Предложите способ отказаться. Подавляющее большинство органов рабочей группы сочло нарушением баннер, на котором ни на одном уровне рядом с кнопкой согласия нет варианта отказа.
- Не прячьте отказ. Ссылка на отказ, затерянная в абзаце и ничем не выделенная, не ведёт к действительному согласию. Цвета кнопок и контраст оцениваются в каждом случае отдельно.
- Доступ не должен зависеть от согласия. В руководстве в качестве примера согласия, данного не свободно, приведена страница, которая блокирует всё содержимое, пока читатель не нажмёт «Принять cookie».
- Отозвать согласие должно быть так же просто, как дать. Если согласие потребовало одного нажатия, отзыв тоже должен занимать одно нажатие. Один из вариантов: постоянная ссылка на видном, стандартном месте, а рабочая группа упоминает также небольшой значок.
Постройте запрос, которым смогут пользоваться все
Баннер, который не блокирует страницу
Небольшой баннер позволяет читателю продолжать чтение, и именно это предпочитает Google. Он всё равно должен соответствовать WCAG 2.2. Критерий успеха 2.4.11, «Фокус не закрыт (минимум)» (Focus Not Obscured, Minimum), не выполняется, если закреплённый баннер полностью скрывает элемент, на котором находится фокус клавиатуры. Добавьте отступ прокрутки, равный высоте баннера:
html {
scroll-padding-bottom: 96px; /* the banner's height */
}
Размещайте баннер поверх страницы или резервируйте для него место, чтобы он не сдвигал статью вниз и не добавлял сдвиг вёрстки.
Модальное диалоговое окно
Если запрос обязан остановить читателя, постройте его как настоящее модальное диалоговое окно по шаблону W3C.
<div role="dialog" aria-modal="true"
aria-labelledby="consent-title" aria-describedby="consent-text">
<h2 id="consent-title">Your privacy choices</h2>
<p id="consent-text">Choose whether this site may use cookies for advertising.</p>
<button type="button">Reject all</button>
<button type="button">Accept all</button>
<button type="button">Choose settings</button>
</div>
- Переносите фокус в диалог при его открытии.
- Tab и Shift + Tab перебирают элементы управления внутри диалога и замыкаются по кругу на концах.
- Escape закрывает диалог. Считайте это отсутствием выбора, но никогда не согласием.
- При закрытии возвращайте фокус на элемент, который открыл диалог. Если диалог открылся при загрузке страницы, переместите фокус в начало содержимого.
На телефоне
- Закрепите баннер внизу экрана и оставьте заголовок видимым над ним.
- Располагайте кнопки друг под другом на всю ширину, чтобы каждую было удобно нажимать, а «Принять» и «Отклонить» были одного размера.
- Делайте текст коротким, а подробности переносите на второй уровень.
- Проверьте вёрстку при ширине 320 CSS-пикселей и при тексте, увеличенном до 200%. Кнопки должны оставаться доступными без горизонтальной прокрутки.
На компьютере
- Используйте нижнюю панель или панель в углу и оставляйте статью свободной.
- Сделайте так, чтобы каждый элемент управления работал с клавиатуры, с видимым индикатором фокуса.
- Держите контрастность текста не ниже 4,5:1, а для крупного текста не ниже 3:1.
Чек-лист
- Загрузите главную страницу и статью с чистым профилем браузера, на телефоне и на компьютере. Посчитайте, что появляется поверх содержимого.
- Уберите каждое полноэкранное наложение, которого не требует закон.
- Уберите любой редирект на отдельную страницу согласия.
- Убедитесь, что ни один тег, которому нужно согласие, не срабатывает до того, как читатель согласился.
- Рядом с каждым вариантом согласия поставьте вариант отказа, кнопкой того же веса.
- Уберите заранее отмеченные флажки и любую логику, считающую прокрутку согласием.
- Добавьте на каждую страницу постоянную ссылку или значок для изменения настроек приватности.
- Пройдите по баннеру клавишей Tab без мыши и убедитесь, что фокус остаётся видимым и никогда не пропадает за ним.
- Проверьте модальное окно с программой чтения с экрана, включая Escape и возврат фокуса.
- Замените самодельные всплывающие окна установки приложения небольшим баннером.
Источники
- Interstitials and dialogs, Google Search Central
- The Initial Better Ads Standards, Coalition for Better Ads
- Desktop prestitial ad with countdown, Coalition for Better Ads
- Mobile prestitial ad, Coalition for Better Ads
- Guidelines 05/2020 on consent under Regulation 2016/679, European Data Protection Board
- Report of the work undertaken by the Cookie Banner Taskforce, European Data Protection Board
- Understanding Focus Not Obscured (Minimum), W3C WAI
- Dialog (Modal) Pattern, W3C WAI
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
- Optimize Cumulative Layout Shift, web.dev