Gestionnaire de consentement - Consent banner

Ce composant est disponible depuis la version 1.0.0.
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !


Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles, notamment le dépôt de cookies non fonctionnels dans son navigateur).

 

Gestionnaire de consentement

Le gestionnaire de consentement se compose plusieurs éléments :

  1. Le bandeau

  2. La modale de gestion du consentement

  3. Le bouton d’accès rapide à la modale de gestion du consentement

  4. L’affichage des services désactivés

1. Le bandeau

Le bandeau permet le recueil du consentement des utilisateurs à l’arrivée sur le site. Il est composé de : 

  • Un titre - optionnel.

  • Une description, contenant un texte explicatif - obligatoire.

  • 3 boutons - obligatoires.

    • « Accepter tout » > ferme le bandeau et enregistre le choix de l’utilisateur.

    • « Refuser tout » > ferme le bandeau et enregistre le choix de l’utilisateur.

    • « Personnaliser » > ouvre la modale de gestion du consentement.

Le bandeau reste affiché tant que l’utilisateur n’a pas fait un choix.

Ce doit être le premier élément sélectionné lors de la navigation au clavier . Il est faut donc le placer en première position dans le DOM, juste après la balise <body> (et avant les liens d'évitement).

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-consent-banner"> <p class="fr-h6 fr-mb-3v">À propos des cookies sur nomdusite.fr</p> <div class="fr-consent-banner__content"> <p class="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p> </div> <ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm"> <li> <button class="fr-btn"> Tout accepter </button> </li> <li> <button class="fr-btn fr-btn"> Tout refuser </button> </li> <li> <!-- Ce bouton permet l'ouverture de la modale de finalité ayant pour id 'fr-consent-modal' --> <button class="fr-btn fr-btn fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="fr-consent-modal"> Personnaliser </button> </li> </ul> </div>

 

  • En desktop, le bandeau est ferré en bas à gauche de la fenêtre du navigateur.

  • En mobile, il est ferré en bas.
    Lorsque la hauteur maximum du bandeau est atteinte , dans le cas d’un texte explicatif long, un scroll vertical apparait sur l’ensemble du bandeau permettant à l’utilsateur de prendre connaissance de la totalité du message avant de faire son choix.

 

2. La modale de gestion du consentement

La modale de gestion du consentement permet de lister les cookies par finalité et de gérer le consentement de façon granulaire.

La modale liste les finalités de cookies. Chaque finalité se compose d'un titre, d’une description et d'un bouton “voir plus de détails” permettant d’afficher les sous-finalités associées. Les sous-finalités servent à présenter le détail des partenaires associés à la finalité.

Le consentement est obtenu de manière globale (“tout accepter” / “tout refuser”) ou par finalité et sous finalité (“accepter”/”tout refuser”).

Pour les éléments de contenus obligatoires à afficher sur ce premier, et la présentation des finalités, consultez les directives CNIL.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 <dialog id="fr-consent-modal" class="fr-modal" role="dialog" aria-labelledby="fr-consent-modal-title"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-10 fr-col-lg-8"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" aria-controls="fr-consent-modal">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-consent-modal-title" class="fr-modal__title"> Panneau de gestion des cookies </h1> (...)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 <dialog id="fr-consent-modal" class="fr-modal" role="dialog" aria-labelledby="fr-consent-modal-title"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-10 fr-col-lg-8"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-link--close fr-link" aria-controls="fr-consent-modal">Fermer</button> </div> <div class="fr-modal__content"> <h1 id="fr-consent-modal-title" class="fr-modal__title"> Panneau de gestion des cookies </h1> <div class="fr-consent-manager"> <!-- Finalités --> <div class="fr-consent-service fr-consent-manager__header"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a> </legend> <div class="fr-consent-service__radios"> <div class="fr-radio-group"> <input type="radio" id="consent-all-accept" name="consent-all"> <label class="fr-label" for="consent-all-accept">Tout accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-all-refuse" name="consent-all"> <label class="fr-label" for="consent-all-refuse">Tout refuser </label> </div> </div> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend aria-describedby=&#34;finality-0-desc&#34; class="fr-consent-service__title">Cookies obligatoires</legend> <div class="fr-consent-service__radios"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-0-accept" name="consent-finality-0"> <label class="fr-label" for="consent-finality-0-accept">Accepter </label> </div> <div class="fr-radio-group"> <input disabled="" type="radio" id="consent-finality-0-refuse" name="consent-finality-0"> <label class="fr-label" for="consent-finality-0-refuse">Refuser </label> </div> </div> <p id="finality-0-desc" class="fr-consent-service__desc">Ce site utilise des cookies nécessaires à son bon fonctionnement qui ne peuvent pas être désactivés.</p> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend aria-describedby=&#34;finality-1-desc&#34; class="fr-consent-service__title">Nom de la finalité</legend> <div class="fr-consent-service__radios"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-accept" name="consent-finality-1-"> <label class="fr-label" for="consent-finality-1-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-refuse" name="consent-finality-1-"> <label class="fr-label" for="consent-finality-1-refuse">Refuser </label> </div> </div> <p id="finality-1-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p> <div class="fr-consent-service__collapse"> <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-controls="finality-1-collapse"> Voir plus de détails</button> </div> <div class="fr-consent-services fr-collapse" id="finality-1-collapse"> <!-- Sous finalités --> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Sous finalité 1</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-1-accept" name="consent-finality-1-service-1"> <label class="fr-label" for="consent-finality-1-service-1-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-1-refuse" name="consent-finality-1-service-1"> <label class="fr-label" for="consent-finality-1-service-1-refuse">Refuser </label> </div> </div> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Sous finalité 2</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-2-accept" name="consent-finality-1-service-2"> <label class="fr-label" for="consent-finality-1-service-2-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-2-refuse" name="consent-finality-1-service-2"> <label class="fr-label" for="consent-finality-1-service-2-refuse">Refuser </label> </div> </div> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Sous finalité 3</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-3-accept" name="consent-finality-1-service-3"> <label class="fr-label" for="consent-finality-1-service-3-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-1-service-3-refuse" name="consent-finality-1-service-3"> <label class="fr-label" for="consent-finality-1-service-3-refuse">Refuser </label> </div> </div> </fieldset> </div> </div> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend aria-describedby=&#34;finality-2-desc&#34; class="fr-consent-service__title">Nom de la finalité</legend> <div class="fr-consent-service__radios"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-accept" name="consent-finality-2-"> <label class="fr-label" for="consent-finality-2-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-refuse" name="consent-finality-2-"> <label class="fr-label" for="consent-finality-2-refuse">Refuser </label> </div> </div> <p id="finality-2-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p> <div class="fr-consent-service__collapse"> <button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-controls="finality-2-collapse"> Voir plus de détails</button> </div> <div class="fr-consent-services fr-collapse" id="finality-2-collapse"> <!-- Sous finalités --> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Sous finalité 1</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-1-accept" name="consent-finality-2-service-1"> <label class="fr-label" for="consent-finality-2-service-1-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-1-refuse" name="consent-finality-2-service-1"> <label class="fr-label" for="consent-finality-2-service-1-refuse">Refuser </label> </div> </div> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title" aria-decribedby=&#34;undefined-desc&#34;>Sous finalité 2</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-2-accept" name="consent-finality-2-service-2"> <label class="fr-label" for="consent-finality-2-service-2-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-2-refuse" name="consent-finality-2-service-2"> <label class="fr-label" for="consent-finality-2-service-2-refuse">Refuser </label> </div> </div> <p id="-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p> </fieldset> </div> <div class="fr-consent-service"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-consent-service__title">Sous finalité 3</legend> <div class="fr-consent-service__radios fr-fieldset--inline"> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-3-accept" name="consent-finality-2-service-3"> <label class="fr-label" for="consent-finality-2-service-3-accept">Accepter </label> </div> <div class="fr-radio-group"> <input type="radio" id="consent-finality-2-service-3-refuse" name="consent-finality-2-service-3"> <label class="fr-label" for="consent-finality-2-service-3-refuse">Refuser </label> </div> </div> </fieldset> </div> </div> </fieldset> </div> <!-- Bouton de confirmation/fermeture --> <ul class="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm"> <li> <button class="fr-btn" id="fr-consent-modal" title="Confirmer mes choix"> Confirmer mes choix </button> </li> </ul> </div> </div> </div> </div> </div> </div> </dialog>

 

Exemple de présentation de liste des finalités :

Exemple de présentation de sous finalité :

 

3. Le bouton d’accès rapide à la gestion du consentement

La modale de gestion du consentement doit toujours être accessible à n’importe quel moment de la navigation de l’utilisateur. Un lien permettant d’afficher la modale devra donc être toujours présent dans le pied de page (Footer) dans la liste fr-footer__bottom-list.



1 2 3 4 5 6 <!-- Le bouton d'ouverture est placé dans le footer, au sein de la liste .fr-footer__bottom-list --> <li class="fr-footer__bottom-item"> <button class="fr-footer__bottom-link" data-fr-opened="false" aria-controls="fr-consent-modal">Gestion des cookies</button> </li>

 

4. L’affichage des services désactivés

Le refus sur certains cookies peuvent amener le blocage de certaines fonctionnalités, notamment les services tiers affichés dans les pages du site via une iframe comme par ex les players vidéo… il faut alors désactiver le service et afficher un texte d’information et d’un lien permettant le consentement au service.

Exemple standard:

1 2 3 4 5 6 7 <div class="fr-consent-placeholder"> <p class="fr-h6 fr-mb-2v">**Nom du service** est désactivé</p> <p class="fr-mb-6v">Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p> <button class="fr-btn" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**"> Autoriser </button> </div>

 

Exemple vidéo grand format

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class="fr-content-media fr-content-media--lg"> <div class="fr-responsive-vid"> <div class="fr-consent-placeholder"> <p class="fr-h6 fr-mb-2v">**Nom du service** est désactivé</p> <p class="fr-mb-6v">Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p> <button class="fr-btn" title="Autoriser"> Autoriser </button> </div> </div> <div class="fr-content-media__caption">© Légende de la vidéo</div> <div class="fr-content-media__transcription"> <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a> </div> </div>

 


5. Thème DSFR pour Tarteaucitron

Le DSFR propose une adaptation du composant pour le gestionnaire de consentement Tarte au citron que vous pouvez ré-utiliser sur vos projets via le dépôt GIT https://github.com/GouvernementFR/dsfr-theme-tarteaucitron .


Il n’y a aucune dépendance au DSFR - le thème propose sa propre css.
Le code html et js sont ceux de tarteaucitron.

Le thème a été testé sur les versions 1.9.1, 1.8.4 et 1.8.3 de tarteaucitron, avec les label de boutons présent dans le bandeaux de consentement ci-dessus ('Personnaliser', ‘Tout refuser’, ‘Tout accepter’).

Règles d’utilisation

Usage

La place du bandeau, les styles et l’ordre des boutons ne peuvent pas être modifié. Seul le texte est à adapté en fonction du contexte.

Accessibilité

  • Le bandeau de consentement doit être le premier élément sélectionné lors de la navigation au clavier (avant les liens d'évitement). Il faut donc le placer de préférence en première position dans le DOM, juste après la balise <body> (et avant les liens d'évitement).

  • La fenêtre de finalité étant une modale, elle suit les mêmes recommandations que cette dernière. Il en est de même pour les boutons radios permettant de choisir l'état des finalité.



Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :