# Как спроектировать баннер cookie: соответствие требованиям и удобство

> Баннер cookie, который отвечает ожиданиям GDPR и уважает посетителей: равноценный выбор, понятный текст, доступная разметка, без сдвига макета и с простым отзывом.

Source: https://www.cookiesh.eu/ru/blog/cookie-banner-design-best-practices  
Published: 2026-04-16

## Key takeaways

- Разместите варианты «Принять», «Отклонить» и «Настроить» на первом уровне баннера с одинаковым визуальным весом.
- Описывайте цели конкретно и простым языком, а на уровне настроек держите все необязательные категории выключенными по умолчанию.
- Стройте баннер на настоящих кнопках, с подписанным контейнером, видимым фокусом и достаточным контрастом, чтобы выбор мог сделать каждый.
- Показывайте баннер поверх контента, а не сдвигайте контент вниз, чтобы он не вызывал смещения макета.
- Дайте посетителям постоянный способ изменить или отозвать согласие и применяйте их выбор сразу.

Баннер cookie, который соответствует требованиям и удобен для пользователей, показывает понятный выбор на первом экране — обычно «Принять все», «Отклонить все» и «Настроить» — с одинаковым визуальным весом. Он простым языком объясняет цели, держит необязательные файлы cookie выключенными, пока посетитель не примет решение, работает с клавиатурой и программой чтения с экрана, не сдвигает макет страницы и позволяет людям позже передумать.

## Что должно быть на первом уровне баннера cookie?

Первый уровень должен содержать достаточно информации для осознанного выбора и одинаково простые способы согласиться или отказаться. Все остальное можно разместить на один клик глубже.

Включите следующие элементы:

- **Краткое описание целей**, где названо, для чего вы используете файлы cookie, например для аналитики и рекламы, и указано, когда задействованы партнеры.
- **Три действия одинаковой заметности:** принять все, отклонить все и настроить — одного размера, стиля и уровня расположения.
- **Ссылку на политику использования файлов cookie** с полной информацией.
- **Количество поставщиков**, если вы используете IAB Transparency & Consent Framework, потому что TCF v2.2 требует указывать число поставщиков на первом уровне. См. статью [IAB TCF 2.2: подробный разбор](/ru/blog/iab-tcf-2-2-explained).

Пример текста для первого уровня:

> Мы используем файлы cookie, чтобы сайт работал, а с вашего разрешения — чтобы вместе с партнерами измерять трафик и показывать релевантную рекламу. Вы можете принять все, отклонить все или выбрать по категориям, а также в любой момент передумать в разделе «Настройки cookie».

Избегайте заголовка вроде «Мы ценим вашу конфиденциальность» с единственной кнопкой «ОК». Текст, который звучит успокаивающе, но не называет ни одной цели, никого не информирует. Большинство [темных паттернов, которые преследуют регуляторы](/ru/blog/cookie-banner-dark-patterns), — прямая противоположность практикам из этого руководства.

## Как должен работать уровень настроек?

Уровень настроек позволяет посетителям выбирать по целям. Сгруппируйте файлы cookie в небольшое число категорий, например необходимые, предпочтения, аналитика и маркетинг, и держите все необязательные категории выключенными по умолчанию.

Для каждой категории покажите описание в одно предложение, несколько конкретных примеров и задействованных поставщиков. Отметьте категорию необходимых файлов cookie как «всегда активна», а не предлагайте переключатель, который ничего не делает. Предложите «Сохранить выбор» наряду с «Принять все» и «Отклонить все», не выделяя визуально ни один из вариантов.

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

## Где разместить баннер на странице?

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

- **Полоса внизу или блок в углу:** меньше мешают и подходят для большинства сайтов, если необязательные файлы cookie остаются выключенными, пока не сделан выбор.
- **Модальное окно по центру:** вынуждает принять решение до начала использования, но и в нем должен быть равноценный отказ, иначе оно начинает работать как cookie wall.
- **Мобильные устройства:** не закрывайте весь экран, располагайте кнопки друг под другом на всю ширину с одинаковым оформлением и держите их в зоне досягаемости большого пальца.

Производительность — тоже часть дизайна. Показывайте баннер как наложение с фиксированным позиционированием, чтобы он не сдвигал контент вниз, иначе это ухудшит показатель Cumulative Layout Shift (CLS). Крупный текстовый баннер также может оказаться элементом Largest Contentful Paint (LCP) страницы, а тяжелые обработчики кликов могут замедлить Interaction to Next Paint (INP). Подробности — в нашем руководстве [Баннеры cookie и Core Web Vitals](/ru/blog/cookie-banners-core-web-vitals).

## Как сделать баннер cookie доступным?

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

```html
<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Ваш выбор в отношении cookie</h2>
  <p id="cc-desc">
    Мы используем файлы cookie для аналитики и рекламы, только если вы это разрешите.
    <a href="/cookie-policy">Политика использования файлов cookie</a>
  </p>
  <button type="button">Отклонить все</button>
  <button type="button">Настроить</button>
  <button type="button">Принять все</button>
</div>
```

Разницу определяют несколько правил:

1. Используйте элементы `<button>`, а не кликабельные `<div>`, чтобы клавиатура и вспомогательные технологии работали по умолчанию.
2. Если баннер блокирует страницу, добавьте `aria-modal="true"`, переместите в него фокус, удерживайте фокус внутри, пока не сделан выбор, а затем верните фокус на страницу.
3. Обеспечьте контраст уровня WCAG AA (4,5:1 для обычного текста) на каждой кнопке, включая кнопку отказа.
4. Дайте каждому элементу управления категорией доступное имя и состояние, например подписанный флажок или элемент с `role="switch"` и `aria-checked`.
5. Поддерживайте масштабирование и маленькие экраны, не скрывая ни одно из трех действий.

## Как баннер должен вести себя после выбора?

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

Затем доработайте детали:

- **Постоянный доступ:** добавьте ссылку «Настройки cookie» в подвал сайта или небольшую плавающую кнопку, потому что отозвать согласие должно быть так же просто, как дать его.
- **Разумные повторные запросы:** не показывайте баннер при каждом визите. Спрашивайте снова по прошествии разумного срока или когда существенно меняются цели или поставщики.
- **Поведение по регионам:** посетителям из ЕС и Великобритании нужно предварительное согласие (opt-in). В Калифорнии действует модель отказа (opt-out) со ссылкой «Do Not Sell or Share My Personal Information» и учетом сигналов [Global Privacy Control](/ru/blog/global-privacy-control).
- **Записи:** храните, что выбрал каждый посетитель, когда и какую версию баннера он видел, чтобы позже подтвердить наличие согласия.

## Что проверить перед запуском?

Перед выпуском нового или переработанного баннера пройдите эту последовательность:

1. Убедитесь в чистом сеансе браузера, что до выбора не загружается ничего необязательного.
2. Нажмите «Отклонить все» и проверьте, что запросы аналитики и рекламы остаются заблокированными на всех страницах.
3. Примите файлы cookie, затем отзовите согласие через ссылку в подвале и проверьте, что теги перестали работать.
4. Пройдите весь сценарий только с клавиатурой, а затем с программой чтения с экрана.
5. Протестируйте на маленьком экране телефона в портретной ориентации.
6. Измерьте CLS, LCP и INP при видимом баннере.
7. Проверьте баннер на всех языках и во всех регионах, которые вы обслуживаете.

## Итоги

Хороший баннер cookie честный, сбалансированный и быстрый: равноценный выбор, простые слова, доступные элементы управления и поведение, которое соответствует надписям на кнопках. Проектируйте для посетителя, который хочет отказаться, так же тщательно, как для того, кто соглашается. Такие инструменты, как Cookiesh, умеют показывать баннеры для Общего регламента по защите данных (GDPR), CCPA и LGPD с учетом геолокации через загрузчик, который не вызывает смещения макета, чтобы ваша команда могла сосредоточиться на текстах и дизайне.

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

## FAQ

### Каким должен быть баннер cookie: модальным окном или полосой внизу?

Соответствовать требованиям может любой вариант. Модальное окно вынуждает принять решение, но воспринимается как более навязчивое и все равно должно предлагать простой отказ. Полоса или блок в углу меньше мешают, а необязательные файлы cookie просто остаются выключенными, пока посетитель не сделает выбор.

### Какой длины должен быть текст баннера?

Достаточно короткий, чтобы прочитать его за несколько секунд, — обычно два-три предложения на первом уровне. Подробности вынесите на уровень настроек и в политику использования файлов cookie, но убедитесь, что первый уровень все же называет основные цели.

### Нужен ли отдельный баннер для посетителей из США?

Часто да. Посетителям из ЕС и Великобритании нужен баннер с предварительным согласием (opt-in), а в Калифорнии действует модель отказа (opt-out) со ссылкой «Do Not Sell or Share My Personal Information» («Не продавать и не передавать мою персональную информацию»). Геотаргетинг позволяет показывать каждому региону подходящий вариант.

### Можно ли проводить A/B-тестирование баннера cookie?

Тестировать макет, формулировки и расположение можно, но каждый вариант должен сам по себе соответствовать требованиям. Повышать долю согласий, усложняя отказ, — именно то, против чего выступают регуляторы.

## Sources

- [EDPB Guidelines 05/2020 on consent](https://www.edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
- [web.dev: Web Vitals](https://web.dev/articles/vitals)
- [IAB Europe Transparency & Consent Framework](https://iabeurope.eu/transparency-consent-framework/)
- [Global Privacy Control](https://globalprivacycontrol.org/)