Feuille
La feuille est utilisée pour afficher du contenu secondaire sans interrompre la tâche principale de l’utilisateur. Elle est moins intrusive qu’un dialogue modal, mais permet tout de même de mettre en avant la consultation d’informations.
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
Pour afficher des informations complémentaires qui ne sont pas essentielles à la tâche en cours.
Lorsque l’on souhaite mettre à disposition un texte explicatif, une définition ou un contenu secondaire sans recourir à un dialogue modal.
Quand l’espace est limité, notamment sur mobile, et que l’utilisateur doit pouvoir consulter les informations sans perdre le contexte de la page.
La feuille est utilisée autant au format mobile qu’au format bureau en complément d’autres composants, tels que la note et l’infobulle :
- Au format mobile, elle s’affiche par défaut lorsque l’utilisateur interagit avec les composants infobulles et notes.
- Au format bureau, la feuille est utilisée uniquement pour le composant infobulles lorsqu’il y a trop de contenu à afficher. Son utilisation doit être uniforme à l’ensemble des occurrences du composant ; deux affichages ne peuvent cohabiter.
Quand ne pas l’utiliser
Évitez d’utiliser le composant Feuille lorsque vous devez afficher des informations essentielles à la tâche en cours. Ce composant est destiné à des contenus secondaires.
Pour afficher des contrôles interactifs complexes comme des formulaires ou des boutons d’action principaux.
Lorsqu’une interaction immédiate et critique est requise (dans ce cas, privilégier un dialogue modal ou une autre approche plus appropriée).
Anatomie
- Libellé de la feuille
- Contenu de la feuille
- Icône de fermeture
- Barre de défilement
- Fond assombri
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.
Titre de la feuille
Même si un titre n’est pas obligatoire, il est fortement recommandé d’en inclure un pour :
- donner un contexte immédiat aux utilisateurs de lecteurs d’écran,
- améliorer l’expérience clavier en fournissant un point de repère stable,
- respecter le principe de « perceivable content » du WCAG.
Le titre doit être court, clair et représenter fidèlement le contenu de la feuille.
Contenu de la feuille
Le contenu de la feuille doit être court et clair.
Il peut inclure du texte et des liens. Le contenu ne doit pas comporter d’éléments interactifs complexes.
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.
Feuille (complète)
Positionnement et alignement : Fixée en bas de l’écran.
Dimensions : La hauteur de la feuille mesure au maximum un tiers de la fenêtre et au minimum 320 px pour garantir un confort de lecture. La feuille doit s’adapter à 100 % de la largeur.
Titre et contenu de la feuille
Alignement et positionnement : Titre et contenu alignés à gauche, selon la grille utilisée.
Dimensions : La largeur maximale du contenu est de 825 px.
Fond assombri
Dimensions : Le fond assombri couvre 100 % de la fenêtre et rend la page en arrière‑plan inactive.
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.
Feuille (complète)
La feuille s’affiche uniquement à la suite d’une action explicite de l’utilisateur, par exemple en cliquant sur l’icône de l’infobulle. Elle ne doit pas apparaître automatiquement au survol ni au chargement de la page.
Lorsqu’elle est affichée, la feuille fonctionne en mode modal :
- Le contenu de la page en arrière-plan est grisé et désactivé afin d’empêcher toute interaction.
- L’utilisateur ne peut interagir qu’avec les éléments présents dans la feuille.
La feuille peut être fermée de plusieurs façons :
- Bouton de fermeture : cliquer ou taper sur le bouton situé en haut à droite.
- Clavier : utiliser la touche Échap.
- Clic sur l’arrière-plan : cliquer sur la zone grisée en dehors de la feuille permet de la fermer.
Pour l’accessibilité :
- À l’ouverture de la feuille, le focus clavier est transféré vers le titre de la feuille si celui-ci existe. Si aucun titre n’est présent, le focus est transféré vers un élément focusable invisible ou vers le container de la feuille marqué avec les paramètres appropriés.
- La navigation dans la feuille doit être contenue dans la feuille tant qu’elle est ouverte (focus trap), afin d’éviter que l’utilisateur perde le contexte.
- À la fermeture, le focus revient automatiquement à l’élément déclencheur (par exemple, l’icône ou le lien ayant ouvert la feuille).
Contenu de la feuille
Lorsque le contenu dépasse la hauteur maximale autorisée, un défilement vertical s’active uniquement dans la feuille. Le défilement de la page en arrière-plan est désactivé, puisque le contenu de fond est grisé et verrouillé pour empêcher toute interaction.
Pour l’accessibilité : le défilement doit être possible au clavier (touches fléchées, page haut/bas) et compatible avec les technologies d’assistance.
Fond assombri
Pour des raisons d’accessibilité, le fond assombri rend la page en arrière‑plan inactive.
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 de fermeture pour fermer la feuille.
- Cliquer sur le contenu pour interagir avec les liens ou les informations supplémentaires.
- Utiliser la molette pour faire défiler le contenu.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Échap pour fermer la feuille.
- Utiliser Tab pour naviguer dans les liens et éléments.
- Utiliser les touches fléchées haut/bas ou Page haut/Page bas pour faire défiler le contenu.
- Utiliser Entrée pour activer un lien.
- Focus confiné à la feuille tant qu’elle est ouverte pour maintenir le contexte de l’utilisateur.
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