Composants
Bannière de gestion des témoins de navigation
Les témoins de navigation (cookies) sont de petits fichiers texte placés dans un navigateur par un site Web. Les sites Web utilisent généralement des fichiers témoins pour assurer le bon fonctionnement et une meilleure expérience de navigation. La gestion des témoins de navigation est primordiale pour donner suite aux nouvelles obligations législatives prévues à la Loi sur l’accès aux documents des organismes publics et sur la protection des renseignements personnels. Certaines informations doivent être transmises à l’utilisateur entre autres via une politique de confidentialité. De plus, il est nécessaire d’obtenir le consentement de la personne notamment lorsque les témoins de navigation permettent l’identification, le profilage ou la localisation.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
Le responsable ou la responsable de la protection des renseignements personnels (RPRP) valide la nécessité d’afficher un avis dans le contexte de votre site ou service en ligne. Voir les pages Protection des renseignements personnels pour plus d’informations.
Quand ne pas l’utiliser
Lorsque le RPRP confirme que l’avis n’est pas nécessaire ou que les témoins utilisés ne permettent ni identification, ni profilage, ni localisation.
Anatomie
- Titre et contenu
- Boutons secondaires
- Bouton tertiaire
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Bonnes pratiques
La bannière est composée de deux sections :
- Une section avec un titre et un texte expliquant la gestion des témoins de navigation.
- Une section avec les boutons.
Le contenu à transmettre à l’utilisateur et les actions liées sont spécifiques à chaque cas de collecte de renseignements personnels. Les textes dans les visuels de cette page sont seulement des exemples. L’information à diffuser doit être vérifiée auprès de votre responsable de la protection des renseignements personnels.
L’information sur le consentement doit être concise, mais explicite. L’ensemble de la politique de confidentialité spécifique au site Web ou service en ligne doit être accessible dans une autre page pour les personnes qui souhaitent s’informer davantage. Un lien hypertexte à l’intérieur d’un contenu bref suffit. Le texte devrait être précédé d’un titre court et explicite.
Le titre et les libellés des boutons devraient être assez explicites pour que l’utilisateur comprenne rapidement le sujet de la bannière, par exemple : Accepter les témoins, Refuser les témoins et Gérer mes préférences.
Boutons secondaires et bouton tertiaire
De manière générale, trois actions sont possibles : accepter les témoins, refuser les témoins et gérer les préférences. Les deux premières actions, accepter et refuser les témoins, sont présentées sous la forme de boutons secondaires. Elles doivent être montrées à valeurs égales pour éviter tout biais. La troisième action, gérer les préférences, est présentée sous la forme d’un bouton tertiaire. L’action de gérer les préférences peut être facultative s’il n’est pas possible de personnaliser la gestion des témoins. Les fiches Boutons et Libellés des boutons contiennent les informations techniques et les orientations spécifiques.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs de l’interface, avec des informations précises sur son anatomie.
Bannière de gestion des témoins de navigation (complète)
Positionnement et alignement : Le consentement s’affiche dans le bas de l’écran de la fenêtre de navigation. La page en arrière-plan demeure accessible et interactive.
Dimensions : La bannière de gestion des témoins occupe toute la largeur de l’écran.
Titre et contenu
Positionnement et alignement : Au format bureau, le texte est placé à gauche et les boutons à droite. Les deux sections sont centrées verticalement dans la bannière. Au format mobile, le texte est placé au-dessus et les boutons en dessous. Le contenu occupe toute la largeur disponible dans la bannière.
Boutons secondaires et bouton tertiaire
Positionnement et alignement : Au format bureau, les boutons « Accepter les témoins » et « Refuser les témoins » sont sur la même ligne (le bouton pour accepter est en premier). Le bouton « Gérer mes préférences » (s’il est présent) est en dessous de ceux-ci, centré. Au format mobile, les boutons sont placés l’un en dessous de l’autre dans cet ordre : « Accepter les témoins », « Refuser les témoins » et « Gérer mes préférences ». Ils occupent toute la largeur.
Dimensions : Les boutons « Accepter les témoins » et « Refuser les témoins » sont des boutons secondaires compacts alors que le bouton « Gérer mes préférences » est un bouton tertiaire compact.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Bannière de gestion des témoins de navigation (complète)
Lorsque requis, l’information sur la gestion des témoins et sur la politique de confidentialité doit s’afficher dès l’arrivée de l’utilisateur sur le site ou le service en ligne, peu importe sa page d’entrée.
La bannière est persistante tant que l’utilisateur n’a pas interagi avec celle-ci. Les témoins de navigations doivent être désactivés par défaut.
Boutons secondaires et bouton tertiaire
Lorsque l’utilisateur fait l’action d’accepter les témoins, la bannière disparaît et il peut poursuivre sa tâche. Les témoins peuvent alors être activés.
Lorsque l’utilisateur fait l’action de refuser les témoins, la bannière disparaît et il peut poursuivre sa tâche. Les témoins demeurent donc désactivés et ses informations ne seront tout simplement pas collectées.
Lorsque l’utilisateur fait l’action de gérer ses préférences, il accède à une page Web où il peut paramétrer ses préférences quant à la collecte de données en lien avec les témoins de navigation.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le bouton « Accepter les témoins » pour fermer la bannière et activer les témoins.
- Cliquer sur le bouton « Refuser les témoins » pour fermer la bannière et laisser les témoins désactivés.
- Cliquer sur le bouton « Gérer mes préférences » pour ouvrir la page ou le panneau de configuration des témoins.
- Si disponible, cliquer sur le lien vers la politique de confidentialité pour consulter les informations complètes.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Tabulation (Tab) pour naviguer entre les éléments interactifs de la bannière (boutons et liens).
- Appuyer sur Entrée ou Barre d’espace lorsque le focus est sur un bouton pour activer l’action correspondante.
- Utiliser la touche Échap pour fermer la bannière sans accepter les témoins.
Mises à jour
Cette section présente la disponibilité actuelle des différentes versions du composant ainsi qu'un aperçu des changements passés.
| Emplacement | Statut |
|---|---|
| Trousse de design Adobe XD | Disponible |
| Trousse de design Figma | Disponible |
| Trousse de développement | Non disponible |
| Québec.ca (TYPO3) | Non disponible |
| Date | Description |
|---|---|
| 8 août 2025 | Simplification et standardisation de la structure de la fiche |
| 25 janvier 2024 | Mise en ligne de la fiche |
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 27 janvier 2026