# Concevoir un bandeau cookies conforme et agréable à utiliser

> Un bandeau cookies conforme au RGPD et respectueux des visiteurs : choix équivalents, textes clairs, code accessible, aucun décalage de mise en page, retrait facile.

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

## Key takeaways

- Placez les options d'acceptation, de refus et de personnalisation au premier niveau du bandeau, avec le même poids visuel.
- Décrivez les finalités en termes précis et clairs, et désactivez par défaut toutes les catégories non essentielles dans le niveau des paramètres.
- Construisez le bandeau avec de vrais boutons, un conteneur doté d'un libellé, un focus visible et un contraste suffisant, pour que chacun puisse faire un choix.
- Affichez le bandeau en surimpression plutôt que de repousser le contenu vers le bas, afin qu'il ne provoque pas de décalage de mise en page.
- Offrez aux visiteurs un moyen permanent de modifier ou de retirer leur consentement, et appliquez leur choix immédiatement.

Un bandeau cookies conforme et agréable à utiliser présente des choix clairs dès le premier écran, généralement « Tout accepter », « Tout refuser » et « Personnaliser », avec le même poids visuel. Il explique les finalités en langage clair, laisse les cookies non essentiels désactivés jusqu'à ce que le visiteur décide, fonctionne au clavier et avec un lecteur d'écran, ne décale pas la mise en page et permet aux internautes de changer d'avis plus tard.

## Que doit contenir le premier niveau d'un bandeau cookies ?

Le premier niveau doit fournir suffisamment d'informations pour un choix éclairé et des moyens tout aussi simples d'accepter ou de refuser. Tout le reste peut se trouver un clic plus loin.

Incluez ces éléments :

- **Une brève présentation des finalités** qui indique à quoi servent vos cookies, comme la mesure d'audience et la publicité, et précise lorsque des partenaires interviennent.
- **Trois actions avec la même visibilité :** tout accepter, tout refuser et personnaliser, avec la même taille, le même style et le même niveau d'affichage.
- **Un lien vers votre politique cookies** pour tous les détails.
- **Le nombre de fournisseurs**, si vous utilisez l'IAB Transparency & Consent Framework, car le TCF v2.2 impose d'indiquer ce nombre au premier niveau. Consultez [l'IAB TCF 2.2 expliqué](/fr/blog/iab-tcf-2-2-explained).

Exemple de texte pour le premier niveau :

> Nous utilisons des cookies pour assurer le fonctionnement de ce site et, avec votre accord, pour mesurer l'audience et afficher des publicités pertinentes avec nos partenaires. Vous pouvez tout accepter, tout refuser ou choisir par catégorie, et changer d'avis à tout moment via « Paramètres des cookies ».

Évitez un titre du type « Nous respectons votre vie privée » suivi d'un unique bouton « OK ». Un texte qui se veut rassurant mais ne nomme aucune finalité n'informe personne. La plupart des [dark patterns que ciblent les autorités](/fr/blog/cookie-banner-dark-patterns) sont l'inverse des pratiques présentées dans ce guide.

## Comment le niveau des paramètres doit-il fonctionner ?

Le niveau des paramètres permet aux visiteurs de choisir par finalité. Regroupez les cookies en un petit nombre de catégories, comme nécessaires, préférences, mesure d'audience et marketing, et désactivez par défaut toutes les catégories non essentielles.

Pour chaque catégorie, affichez une description d'une phrase, quelques exemples concrets et les fournisseurs concernés. Indiquez que la catégorie des cookies nécessaires est « toujours active » au lieu de proposer un interrupteur qui ne sert à rien. Proposez « Enregistrer mes choix » à côté de « Tout accepter » et « Tout refuser », sans qu'aucun de ces boutons ne soit visuellement favorisé.

Veillez à ce que l'ensemble se parcoure facilement. Une longue liste d'interrupteurs par fournisseur rend le choix éclairé plus difficile, et non plus simple. Placez le détail par fournisseur dans une section dépliable pour ceux qui le souhaitent.

## Où placer le bandeau sur la page ?

Il n'existe pas de position conforme unique. L'essentiel est que le bandeau soit visible, ne masque pas l'option de refus et ne dégrade pas la page.

- **Barre en bas de page ou encart dans un coin :** moins perturbant et adapté à la plupart des sites, à condition que les cookies non essentiels restent désactivés jusqu'à ce qu'un choix soit fait.
- **Fenêtre modale centrale :** impose une décision avant toute utilisation, mais doit tout de même proposer un refus équivalent, sans quoi elle commence à fonctionner comme un cookie wall.
- **Mobile :** évitez de couvrir tout l'écran, empilez les boutons en pleine largeur avec un style identique et gardez-les à portée de pouce.

La performance fait partie du design. Affichez le bandeau en surimpression, en position fixe, pour qu'il ne repousse pas le contenu vers le bas, ce qui pénaliserait le Cumulative Layout Shift (CLS). Un bandeau comportant beaucoup de texte peut aussi finir par être mesuré comme l'élément Largest Contentful Paint (LCP) de la page, et des gestionnaires de clic trop lourds peuvent ralentir l'Interaction to Next Paint (INP). Notre guide sur les [bandeaux cookies et les Core Web Vitals](/fr/blog/cookie-banners-core-web-vitals) entre dans le détail.

## Comment rendre un bandeau cookies accessible ?

Construisez-le en HTML sémantique : de vrais boutons, un conteneur doté d'un libellé, des styles de focus visibles et un contraste de couleurs suffisant. Un visiteur qui ne peut pas utiliser le bandeau ne peut ni donner ni refuser son consentement.

```html
<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Vos choix en matière de cookies</h2>
  <p id="cc-desc">
    Nous n'utilisons des cookies de mesure d'audience et de publicité que si vous l'autorisez.
    <a href="/cookie-policy">Lire notre politique cookies</a>
  </p>
  <button type="button">Tout refuser</button>
  <button type="button">Personnaliser</button>
  <button type="button">Tout accepter</button>
</div>
```

Quelques règles font la différence :

1. Utilisez des éléments `<button>`, et non des éléments `<div>` cliquables, pour que le clavier et les technologies d'assistance fonctionnent nativement.
2. Si le bandeau bloque la page, ajoutez `aria-modal="true"`, déplacez le focus à l'intérieur, maintenez-le jusqu'à ce qu'un choix soit fait, puis rendez le focus à la page.
3. Respectez le contraste WCAG AA (4,5:1 pour le texte normal) sur chaque bouton, y compris celui de refus.
4. Donnez à chaque contrôle de catégorie un nom et un état accessibles, comme une case à cocher dotée d'un libellé ou un élément avec `role="switch"` et `aria-checked`.
5. Prenez en charge le zoom et les petits écrans sans masquer aucune des trois actions.

## Comment le bandeau doit-il se comporter après un choix ?

Appliquez le choix immédiatement et mémorisez-le. Si une personne accepte la mesure d'audience, chargez ces balises sans attendre. Si elle refuse, ou retire son consentement plus tard, cessez de les charger et supprimez les cookies propriétaires que vous contrôlez.

Soignez ensuite les détails :

- **Accès permanent :** ajoutez un lien « Paramètres des cookies » en pied de page ou un petit bouton flottant, car retirer son consentement doit être aussi simple que le donner.
- **Nouvelles sollicitations raisonnables :** n'affichez pas le bandeau à chaque visite. Redemandez après un délai raisonnable ou lorsque vos finalités ou vos fournisseurs changent de manière significative.
- **Comportement selon la région :** les visiteurs de l'UE et du Royaume-Uni doivent donner un consentement préalable (opt-in). Le modèle californien repose sur l'opposition (opt-out), avec un lien « Do Not Sell or Share My Personal Information » et le respect des signaux [Global Privacy Control](/fr/blog/global-privacy-control).
- **Enregistrements :** conservez ce que chaque visiteur a choisi, quand, et quelle version du bandeau il a vue, afin de pouvoir démontrer le consentement par la suite.

## Que vérifier avant la mise en ligne ?

Suivez cette séquence avant de déployer un bandeau nouveau ou repensé :

1. Vérifiez que rien de non essentiel ne se charge avant un choix, dans une session de navigation vierge.
2. Cliquez sur « Tout refuser » et vérifiez que les requêtes de mesure d'audience et publicitaires restent bloquées d'une page à l'autre.
3. Acceptez, puis retirez votre consentement via le lien en pied de page, et vérifiez que les balises s'arrêtent.
4. Effectuez tout le parcours uniquement au clavier, puis avec un lecteur d'écran.
5. Testez sur un petit écran de téléphone en mode portrait.
6. Mesurez le CLS, le LCP et l'INP avec le bandeau affiché.
7. Vérifiez le bandeau dans chaque langue et chaque région que vous ciblez.

## En résumé

Un bon bandeau cookies est honnête, équilibré et rapide : des choix équivalents, des mots simples, des contrôles accessibles et un comportement conforme à ce qu'annoncent les boutons. Concevez-le pour le visiteur qui veut refuser avec autant de soin que pour celui qui accepte. Des outils comme Cookiesh peuvent afficher des bandeaux RGPD, CCPA et LGPD géociblés à partir d'un script de chargement qui ne provoque aucun décalage de mise en page, pour que votre équipe puisse se concentrer sur les textes et le design.

*Cet article est fourni à titre d'information générale et ne constitue pas un avis juridique. Pour toute décision concernant votre situation, consultez un professionnel qualifié de la protection des données.*

## FAQ

### Mon bandeau cookies doit-il prendre la forme d'une fenêtre modale ou d'une barre en bas de page ?

Les deux peuvent être conformes. Une fenêtre modale impose une décision mais paraît plus intrusive, et doit tout de même permettre de refuser facilement. Une barre ou un encart dans un coin est moins perturbant, et les cookies non essentiels restent simplement désactivés jusqu'à ce que le visiteur fasse son choix.

### Quelle longueur doit avoir le texte du bandeau ?

Il doit être assez court pour être lu en quelques secondes, généralement deux ou trois phrases au premier niveau. Réservez les détails au niveau des paramètres et à la politique cookies, mais veillez à ce que le premier niveau mentionne tout de même les principales finalités.

### Ai-je besoin d'un bandeau différent pour les visiteurs américains ?

Souvent, oui. Les visiteurs de l'UE et du Royaume-Uni doivent voir un bandeau de consentement préalable (opt-in), tandis que la Californie applique un modèle d'opposition (opt-out) avec un lien « Do Not Sell or Share My Personal Information ». Le géociblage vous permet de proposer à chaque région l'expérience adaptée.

### Puis-je faire de l'A/B testing sur mon bandeau cookies ?

Vous pouvez tester la mise en page, la formulation et l'emplacement, mais chaque variante doit être conforme en elle-même. Chercher à maximiser l'acceptation en rendant le refus plus difficile est exactement ce que les autorités reprochent.

## 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/)