Composants
Notes
Les notes apportent un complément d’information sans alourdir le texte. Chaque note est représentée dans le contenu par un numéro qui est relié à la description en bas de page.
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 ».
Variantes disponibles
Deux variantes existent :
- Note pour une définition : le terme est souligné en pointillés.
- Note pour une citation ou une source bibliographique : seul l’appel de note numéroté est présent.
Quand l’utiliser
Les notes pour une définition servent à expliquer des termes juridiques, scientifiques et techniques.
Les notes pour une citation ou une source bibliographique peuvent être utilisées pour donner la source d’un renseignement.
À noter que les notes ne sont pas indexées dans les moteurs de recherche externes.
Quand ne pas l’utiliser
Les notes ne doivent pas servir à expliquer les sigles ou les abréviations.
Anatomie
- Terme à définir (avec soulignement pointillé)
- Appel de note
- Définition
- Chiffre de référence
- Flèche de retour
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.
Notes (complètes)
Les notes peuvent se retrouver dans :
- le contenu courant : conservent leurs ordres et leurs définitions se trouvent au bas de la page de contenu.
- des graphiques ou des tableaux : elles sont indépendantes de l’ordre des notes du contenu courant et leurs définitions sont placées directement à la suite de l’élément.
Appel de note
Un seul appel de note peut être utilisé pour un contenu (terme, champ, citation, source bibliographique, etc.).
Définition
Le texte des définitions doit être clair et concis et il ne doit pas reprendre des éléments du contenu principal. Expliquer les termes spécialisés par des mots simples est toujours l’option à privilégier.
Si la même définition est mentionnée plusieurs fois dans la même page, chaque appel de note doit porter un chiffre unique. La définition, quant à elle, n’est pas dupliquée, mais chaque chiffre de référence devra se trouver au bout à gauche de la définition.
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.
Terme à définir
Positionnement et alignement : Placé dans le flux du texte, avec un soulignement pointillé et un appel de note au numéro correspondant à l’ordre d’apparition des notes.
Appel de note
Positionnement et alignement : Placé dans le flux du texte, avec un numéro correspondant à l’ordre d’apparition des notes. Lorsque utilisée dans la variante pour une citation ou une source bibliographique, le contenu qui précède l’appel de note n’est pas souligné en pointillés.
Définition
Positionnement et alignement : Placée en bas de page dans le format bureau, précédée de son numéro de définition.
Dimensions : Largeur maximale de 825 px pour assurer la lisibilité.
Espacements : Séparée du contenu principal par un espacement suffisant pour la distinguer visuellement.
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.
Terme à définir et appel de note
Dans le format bureau, le terme à définir ou l’appel de note mènent à la définition fournie au bas de la page. Dans le format mobile, le comportement de la note reste le même, mais le visuel s’affiche sous forme de feuille. Consulter la fiche de la fiche Feuille pour plus d’informations.
Flèche de retour
Lorsqu’on clique sur la flèche de retour, la page remonte à la position de l’appel de note.
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 chiffre de note pour accéder à la définition correspondante.
- Cliquer sur la flèche de retour en début de définition pour revenir à l’appel dans le contenu.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Naviguer jusqu’à l’appel de note avec la touche Tab puis appuyer sur Entrée pour accéder à la définition.
- Naviguer jusqu’à la flèche de retour en début de définition avec Tab puis appuyer sur Entrée pour revenir à l’appel de note dans le contenu.
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 | À venir |
| Québec.ca (TYPO3) | Disponible |
| Date | Description |
|---|---|
| 28 août 2025 | Simplification et standardisation de la structure de la fiche |
| 11 août 2022 | Modification de la section Comment l’utiliser et Informations techniques |
| 10 juillet 2020 | 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 : 15 janvier 2026