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).
Le gestionnaire de consentement se compose plusieurs éléments :
Le bandeau
La modale de gestion du consentement
Le bouton d’accès rapide à la modale de gestion du consentement
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
<div class="fr-consent-banner">
<h2 class="fr-h6">À propos des cookies sur nomdusite.fr</h2>
<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" title="Autoriser tous les cookies">
Tout accepter
</button>
</li>
<li>
<button class="fr-btn" title="Refuser tous les cookies">
Tout refuser
</button>
</li>
<li>
<button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="fr-consent-modal" title="Personnaliser les cookies">
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.
Pour les développeurs Sur les balises fieldset , les attribut aria-labelledby et role(=”group”) sont présents lorsqu’il y a une balise legend et un paragraphe de description. Si le legend est seul, il ne faut pas mettre ces attributs sur le fieldset.
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>
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) ou au lecteur d’écran. Il faut le placer en première position dans le DOM, juste après la balise <body> (et avant les liens d’évitement).
Gestion du focus : lorsque l’utilisateur confirme ses choix de cookies, repositionner l’utilisateur en haut de la page.
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 :
la communauté slackpour poser vos questions, et échanger avec d’autres utilisateurs. Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !
