Liste structurée
Une liste structurée sert à organiser et à présenter des informations textuelles de façon ordonnée, sans porter une attention particulière aux données numériques.
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
Les variantes s’adaptent à la complexité ou à la clarté intrinsèque des informations présentées :
- Liste structurée sans en-tête
- Liste structurée avec en-tête
Quand l'utiliser
Une liste structurée est idéale pour organiser des informations textuelles à l’intérieur de lignes et de colonnes, plus proprement lorsque la relation entre les éléments de chaque ligne doit être clairement établie. Ce format convient particulièrement dans les cas où il est important de présenter une information principale accompagnée de détails complémentaires.
Le choix entre une liste sans en-tête et avec en-tête dépend du besoin de précision :
- Liste sans en-tête : Elle convient lorsque les termes sont suffisamment explicites pour être compris sans contexte supplémentaire. L’utilisateur percevra naturellement que la cellule à gauche contient l’information principale, tandis que celle à sa droite apporte une précision ou un complément. Ce format convient aux contextes tels que la description de services ou la programmation d’événements.
- Liste avec en-tête : Elle est recommandée lorsqu’il est important que l’utilisateur identifie rapidement le contenu de chaque colonne. Cela s’avère particulièrement pertinent pour les procédures administratives, les programmes gouvernementaux ou les demandes spécifiques. Par exemple, les libellés d’en-tête pourraient être « Procédures à suivre », « Critères d’admissibilité » ou « Formulaires nécessaires ».
Quand ne pas l’utiliser
Il faut éviter d’utiliser une liste structurée lorsque les informations sont trop simples. Une simple liste de noms ou de catégories, ou une seule colonne ou rangée sans détail supplémentaire ne justifie pas l’utilisation de ce composant.
Évitez également d’utiliser la liste structurée lorsque les informations sont trop nombreuses, comme dans le cas d’une longue liste de produits ayant plusieurs caractéristiques. Privilégiez plutôt un tableau de données qui permettra une meilleure organisation des contenus et une meilleure lisibilité.
Enfin, la liste structurée n’est pas adaptée lorsque les informations sont destinées à être comparées de manière croisée, telles que des statistiques de performance entre différentes régions. Un tableau de données facilite la comparaison en offrant une structure plus adaptée à ce type d’analyse.
Anatomie
- Titre de la liste structurée
- Liste structurée
- En-tête (variante avec en-tête)
- Libellé
- Cellule
- Contenu de la cellule
- Colonne
- Rangée
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 liste structurée
Utiliser un titre clair et directif pour orienter la lecture de la liste.
Libellé
Pour les listes sans en-tête, chaque information doit être explicite et compréhensible sans contexte supplémentaire pour assurer une compréhension facile pour tous les utilisateurs, y compris ceux utilisant des technologies d’assistance.
Pour les listes avec en-tête, les en-têtes doivent être concis et commencer par une majuscule, de manière à faciliter la compréhension globale.
Cellule, colonne et rangée
Pour maintenir la clarté, éviter la fusion des cellules. Limiter aussi le nombre de colonnes et de rangées pour une présentation efficace, conformément aux directives d’accessibilité pour les tableaux HTML (en anglais seulement), facilitant ainsi la compréhension pour tous les utilisateurs, y compris ceux utilisant des technologies d’assistance.
Contenu de la cellule
Pour améliorer la lisibilité, privilégier des informations concises dans les cellules pour assurer une bonne lisibilité.
Utiliser une présentation sobre pour éviter la surcharge d’informations. Éviter les listes à puces ou numérotées sauf si absolument nécessaires à la compréhension. Chaque information doit rester concise et directe.
Éviter d’intégrer des paragraphes complets dans les cellules; maintenir des informations succinctes et simples.
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.
Titre de la liste structurée
Positionnement et alignement : Le titre est aligné à gauche.
Dimensions : Le titre de la liste structurée a un style spécifique, indépendant de la hiérarchie des autres titres du contenu. Il occupe toute la largeur de la liste structurée.
Espacements : Un espace de 72 px est prévu au-dessus du titre et de 24 px en dessous, assurant une séparation visuelle claire avec les autres éléments de la page.
Liste structurée
Positionnement et alignement : La liste structurée s’aligne à gauche avec le contenu de la page.
Dimensions : Il est recommandé de limiter la largeur des listes structurées pour une meilleure intégration dans l’interface. Une liste structurée occupant toute la largeur de la page peut sembler disproportionnée et rendre la lecture difficile sur une page Web.
Espacements : Un espace de 72 px est prévu en dessous de la liste, assurant une séparation visuelle claire avec les autres éléments de la page.
En-tête
Positionnement et alignement : Les en-têtes sont toujours placés dans le haut de la liste structurée.
Libellé
Positionnement et alignement : Les libellés d’en-tête sont alignés verticalement par le haut et horizontalement à gauche.
Contenu de la cellule
Positionnement et alignement : Les contenus de la cellule sont alignés verticalement par le haut et horizontalement à gauche.
Colonne
Dimensions : La colonne qui contient le texte le plus court doit occuper moins de 50 % de la largeur totale de la liste structurée. Si le texte dépasse cette limite, il doit s’enrouler sur deux lignes ou plus. La colonne qui contient le texte le plus long doit être suffisamment large pour afficher le contenu de manière lisible. Éviter un contenu trop compact ou étendu sur plusieurs lignes afin de préserver la lisibilité.
À faire
À ne pas faire
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.
Adaptation mobile
Chaque rangée de la liste est transformée en une boîte représentant une entrée, offrant une présentation adaptée et intuitive. Cela évite le défilement horizontal, même si cela entraîne une augmentation du défilement vertical. Cependant, le défilement vertical reste plus naturel et accessible que le défilement horizontal.
Changements visuels dans une liste structurée sans en-tête
Chaque élément, auparavant disposé horizontalement, est désormais présenté verticalement.
Changements visuels dans une liste structurée avec en-tête
Le filet foncé qui séparait l’en-tête de la première ligne dans la liste structurée en format bureau se trouve désormais en haut de la boîte dans la liste structurée en format mobile.
Chaque élément, auparavant disposé horizontalement, est désormais présenté verticalement.
Les libellés d’en-tête sont répétés pour chaque élément. Ceux-ci sont en demi-gras. Il n’y a pas d’espacement sous le libellé.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Aucune interaction par la souris n’est requise.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser les touches de navigation (flèches haut, bas, gauche, droite) pour parcourir les données.
- Utiliser la touche Tab pour passer d’une cellule ou d’un élément à l’autre, si applicable.
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