Afficher/Masquer
Le composant Afficher/masquer permet d’afficher ou de masquer des informations détaillées sur demande, aidant ainsi à maintenir une interface claire et épurée tout en offrant un accès facile aux contenus supplémentaires.
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
Le composant Afficher/masquer offre deux variantes adaptées à différents besoins de présentation et d’interaction :
- Sous un contenu ou une liste
- En continuité du texte
Quand l’utiliser
La variante « Sous un contenu ou une liste » est idéale pour masquer des options multiples, comme des cases à cocher, des boutons radio ou des sections d’informations supplémentaires. Cette approche permet de : réduire la surcharge visuelle, conserver une interface épurée et rendre les choix ou les détails additionnels facilement accessibles lorsque nécessaire.
La variante « En continuité du texte » est idéale pour révéler du contenu directement dans un paragraphe, comme une définition. Utiliser cette variante maintient le flux de lecture sans interruption majeure.
Éviter d’utiliser ce composant pour y insérer des informations importantes que tous les utilisateurs doivent voir immédiatement. Si les informations sont essentielles à la compréhension de la page, elles devraient être visibles par défaut.
Il n’est pas possible d’utiliser consécutivement plusieurs boutons « Afficher/masquer ». Pour permettre l’affichage et le masquage indépendant de plusieurs sections de contenu, l’utilisation d’un accordéon est recommandée.
Anatomie
- Bouton « Afficher/masquer »
- Icône visuelle (chevron)
- Contenu masqué/affiché
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.
Bouton « Afficher/masquer »
Le texte du bouton doit être court et précis, indiquant clairement le contenu à révéler.
Exemples à suivre :
- « Lire la suite » pour du texte masqué.
- « Afficher les détails » pour des informations spécifiques.
- « Afficher la réponse » dans un questionnaire.
- « Voir X options de plus » pour des filtres ou critères supplémentaires.
Exemples à éviter :
- « Plus » : manque de clarté.
- « Cliquez ici » : ne précise pas le contenu.
Une fois le contenu affiché, le libellé change pour indiquer l’action de masquer, par exemple « Masquer les détails » ou « Masquer X options ».
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.
Bouton « Afficher/masquer »
Positionnement et alignement : Pour la variante « Sous un contenu ou une liste », le bouton est positionné en dessous du contenu ou de la liste visible. Pour la variante « En continuité du texte », le bouton est intégré dans le texte, à la fin de la dernière ligne de texte visible.
Dimensions : Adaptées au texte du libellé du bouton, avec une largeur suffisante pour une interaction facile.
Espacements : Respecter un espacement minimum de 8 px autour du bouton pour ne pas gêner la lisibilité.
Style : Adapter la taille et la graisse du texte au contexte pour une bonne lisibilité. Il est possible de choisir une taille de police égale ou inférieure à celle du texte environnant ainsi qu’une graisse différente pour appuyer l’interactivité sans surcharger visuellement l’interface.
Icône visuelle (chevron)
Positionnement et alignement : Situé à droite du libellé du bouton, le chevron est centré verticalement avec le texte.
Dimensions : L’icône doit être suffisamment grande pour être facilement identifiable, mais proportionnée au texte du bouton, souvent entre 12 px et 16 px en largeur.
Espacements : Un espacement d’un minimum de 4 px et d’un maximum de 8 px entre le chevron et le texte du bouton.
Contenu masqué/affiché
Positionnement et alignement : Directement en dessous ou à la suite du bouton « Afficher/masquer », selon la variante. Le contenu s'affiche dans le prolongement visuel de l'élément auquel il est lié pour assurer une continuité visuelle.
Dimensions : Adaptées au contenu à afficher, avec une hauteur dynamique en fonction de la longueur du texte ou des éléments visibles. La largeur suit celle de l'élément parent.
Espacements : Prévoir un espacement suffisant entre le contenu affiché et les autres éléments de l'interface pour maintenir une structure claire et lisible.
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 leurs comportements et les actions qu’ils déclenchent.
Bouton « Afficher/masquer »
Au clic, le bouton permet d’afficher ou de masquer le contenu.
Lors du clic, l’icône change pour refléter l’état du composant : un chevron pointant vers le bas lorsque le contenu est masqué et vers le haut lorsque le contenu est affiché.
Le libellé change en conséquence, comme « Afficher les détails » devenant « Masquer les détails », pour indiquer clairement l’action à effectuer.
Contenu masqué/affiché
Pour la variante « Sous un contenu ou une liste », lorsque l’utilisateur clique pour afficher plus d’options ou d’informations, les éléments supplémentaires se déploient sous la liste ou le texte initial. Un second clic permet de masquer ces éléments, les ramenant à leur état compact d’origine.
Pour la variante « En continuité du texte », le contenu supplémentaire s’intègre directement dans le flux de lecture lorsqu’il est affiché, sans nécessiter de défilement vers une nouvelle section. Lorsqu’il est masqué, il se replie dans la ligne de texte, laissant le flux de lecture inchangé.
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 pour révéler ou masquer le contenu.
- Survoler le bouton avec la souris pour changer son état visuel.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Appuyer sur la touche Espace ou Entrée pour activer le bouton et révéler/masquer le contenu.
- Utiliser la navigation au clavier pour atteindre et activer le composant.
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.
À consulter aussi
Dernière mise à jour : 15 janvier 2026