Bandeau d’en-tête du Programme d’identification visuelle
Le Bandeau d’en-tête du Programme d’identification visuelle est le premier élément visible dans le haut de chaque page. Il permet d'identifier le site et d'indiquer que celui-ci est un site officiel du gouvernement du Québec.
Le Programme d’identification visuelle (PIV) relève du Secrétariat du Conseil du trésor. Les normes concernant le PIV ainsi que la liste des répondants désignés se trouvent sur piv.gouv.qc.ca.
Les orientations suivantes ont été formulées en collaboration avec le responsable du Programme d’identification visuelle au Secrétariat du Conseil du trésor et l’application stricte, visuelle et fonctionnelle, est obligatoire.
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
Tous les sites Web gouvernementaux doivent être identifiés à l’aide d’un bandeau d’en-tête. L’application du bandeau d’en-tête du Programme d’identification visuelle est obligatoire pour l’ensemble des sites publics informationnels et transactionnels ainsi que les extranets. Consultez le site piv.gouv.qc.ca pour plus d’informations.
Quand ne pas l’utiliser
Il n’existe pas de cas où il ne doit pas être utilisé.
Le bandeau d’en-tête du PIV ne peut pas être utilisé comme menu de navigation. Les liens vers les pages et sections du site se trouvent dans le menu de navigation principale, situé sous le bandeau d’en-tête.
Anatomie
- Signature gouvernementale
- Nom du site
- Zone personnalisable
- Barre de recherche
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.
Signature gouvernementale
La signature gouvernementale (logo du gouvernement du Québec) est toujours présente dans le bandeau. Elle ne peut être remplacée par un autre logo.
Nom du site
Le nom complet du site est toujours présent dans le bandeau. Le nom du site doit respecter les orientations de dénomination et références aux services.
Zone personnalisable
La zone personnalisable est optionnelle et se situe complètement à droite. Voici les éléments qui peuvent s’y retrouver :
- un lien de changement de langue ;
- un lien « Nous joindre » ;
- une icône de loupe.
Aucun autre élément ne peut être ajouté à cette section. Les menus cachés de type « hamburger » sont à proscrire, autant au format bureau que mobile.
Le libellé du lien de changement de langue est rédigé dans la langue de destination, par exemple, « English » pour accéder à la version anglaise du site. L’espace pour une seule langue est prévu dans le bandeau d’en-tête.
Barre de recherche
Si une option de recherche est intégrée au site, une icône de loupe sera présente dans la zone personnalisable. Lorsque cet élément est cliqué, une barre de recherche est affichée en dessous.
L’espace réservé (placeholder) contient le texte « Rechercher dans » suivi du nom du site en utilisant la bonne capitalisation.
Spécifications
Cette section présente les détails techniques sur la composition, les comportements fonctionnels et les interactions du composant. Pour plus d’informations sur les mises à jour passées et les changements prévus au composant, consulter l’onglet « Mises à jour ».
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Bandeau d’en-tête du PIV (complet)
Positionnement et alignement : Placé au tout premier niveau en haut de chaque page. Le contenu du bandeau est aligné sur les marges de la page. En format bureau et tablette, la signature, le nom du site et la zone personnalisable sont sur la même ligne horizontale et centrés verticalement dans le bandeau. En format mobile, la signature et la zone personnalisable sont sur la première ligne, tandis que le nom du site est placé en dessous, sur une deuxième ligne.
Dimensions : L’arrière-plan bleu du bandeau occupe toute la largeur de la fenêtre. La hauteur du bandeau est de 72 px par défaut. La hauteur s’ajuste si le nom du site s’affiche sur trois lignes ou plus (en format bureau) ou sur une deuxième ligne (en mobile), afin de maintenir un dégagement de 16 px au-dessus et en dessous du texte.
Nom du site
Positionnement et alignement : En format bureau, affiché à droite de la signature, sur la même ligne. En format mobile, affiché sur une deuxième ligne, sous la signature et la zone personnalisable.
Dimensions : Largeur variable selon la longueur du titre. La hauteur s’ajuste selon la longueur du nom du site ; il peut occuper trois lignes ou plus si nécessaire.
Barre de recherche
Positionnement et alignement : Apparaît directement sous le bandeau. Aligne son contenu avec les marges du site.
Dimensions : Pour les dimensions de la barre de recherche, consulter la fiche Barre de recherche.
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.
Signature gouvernementale
La signature gouvernementale est cliquable et ouvre la page d’accueil de Québec.ca dans un nouvel onglet.
Nom du site
Le nom du site est cliquable et mène à la page d’accueil du site.
Zone personnalisable
Le lien de changement de langue permet d’accéder au site dans une autre langue.
Le lien « Nous joindre » permet de contacter le ministère, l’organisme ou les personnes responsables du site.
L’icône de loupe permet d’afficher la barre de recherche.
Barre de recherche
Une fois que l’icône de loupe dans la zone personnalisable est cliquée, la barre de recherche apparaît directement sous le bandeau. Elle n’est pas visible par défaut et peut être masquée à nouveau en cliquant sur l’icône de loupe.
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 la signature gouvernementale ouvre la page d’accueil de Québec.ca.
- Cliquer sur le nom du site ouvre la page d’accueil du site.
- Cliquer sur le lien de changement de langue charge la version correspondante du site.
- Cliquer sur « Nous joindre » mène à la page de contact du site.
- Cliquer sur l’icône de loupe affiche ou masque la barre de recherche.
- Au survol, le nom du site, le lien de changement de langue et le bouton « Nous joindre » sont soulignés.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- La touche Tab permet de naviguer entre les éléments interactifs (signature, nom du site, changement de langue, « Nous joindre », icône de loupe).
- La touche Entrée active l’élément sélectionné (ex. ouvrir la recherche, changer de langue, accéder à la page d’accueil).
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 : 15 janvier 2026