Composants
Changement de langue
Le menu de changement de langue est utilisé pour traduire des pages de contenus ou de services dans une langue autre que le français ou l’anglais.
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 menu de changement de langue s’utilise lorsque l’information diffusée s’adresse à des clientèles étrangères ou aux personnes nouvellement arrivées au Québec. Les orientations sur la traduction doivent être appliquées.
Tout contenu doit d’abord exister en français, qui est la langue officielle et de référence du Québec. Un ministère ou organisme qui souhaite diffuser des contenus traduits doit le faire dans le respect de sa politique linguistique. La langue par défaut, dans le bandeau d’entête et la navigation générale, est toujours le français. Seules les pages ciblées sont traduites. Le chemin de navigation depuis la page d’accueil ne l’est pas.
Anatomie
- Langue sélectionnée
- Autre langue
- Filet
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.
Changement de langue (complet)
Aucun mécanisme n’a été prévu afin d’inclure un menu de traduction dans le bandeau d’en-tête du PIV autre que le lien « Français » ou « English » pour basculer d’une langue à l’autre. Ce menu est donc contextualisé.
Langue sélectionnée et autre langue
Les libellés de langues sont écrits dans leur propre langue (exemple : écrire « English » pour le libellé de traduction vers l’anglais). Le mot est écrit idéalement avec l’alphabet utilisé dans la langue (exemple : utiliser le Hangeul pour le libellé du mot « Coréen »).
Le libellé « Français » est toujours en premier, suivi du libellé « English » si la page existe en anglais. Les autres libellés de langue sont ordonnancés selon l’importance des publics cibles visés par le contenu.
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 du composant, avec des informations précises sur son anatomie.
Changement de langue (complet)
Positionnement et alignement : Comme ce menu est contextualisé, il est positionné en haut du contenu à traduire, directement sous le titre de niveau 1.
Dimensions : Le menu de changement de langue occupe 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large. La hauteur est déterminée par le nombre de lignes sur lesquelles les libellés sont disposés, généralement entre 1 et 3 lignes, selon la largeur de l’écran.
Espacements : Il y a 32 px au-dessus et en-dessous du menu de langue.
Langue sélectionnée et autres langues
Positionnement et alignement : Les libellés de langues sont disposés côte à côte. Si la taille de l’écran est trop étroite pour contenir tous les libellés sur une seule ligne, les libellés excédentaires peuvent s’ajouter sur une ligne supplémentaire.
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.
Langue sélectionnée et autres langues
Les liens permettent d’accéder à la page avec le contenu traduit dans la langue choisie.
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 un lien pour ouvrir la ressource.
- Survol : affichage d’un soulignement ou changement de couleur pour indiquer l’interactivité.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Navigation possible via la touche Tab pour passer d’un lien à l’autre.
- Activation d’un lien avec la touche Entrée ou Espace.
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) | Disponible |
| Date | Description |
|---|---|
| 12 août 2025 | Simplification et standardisation de la structure de la fiche |
| 13 décembre 2022 | 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