Перейти до вмісту
Mera News

Посібник для видавців, розділ 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 і повернення фокуса.
  • Замініть власні спливні вікна встановлення застосунку невеликим банером.

Джерела