Listes – Système de conception GCWeb

Il existe 3 types de listes. Utilisez :

• des listes à puces (non ordonnées) lorsque l'ordre des éléments de la liste n'a pas d'importance
• des listes numérotées, avec lettres ou chiffres romains (ordonnées) lorsque l'ordre des éléments de la liste a de l'importance
• des listes de descriptions pour les termes avec leurs descriptions ou définitions associées

Sur cette page

• Introduction à une liste
• Liste à puces (non ordonnée)
  • De base : Liste à puces
  • Amélioration : Utiliser des icônes au lieu des puces
  • Amélioration : Affichage sur plusieurs colonnes
  • Amélioration : Conception de type et/ou
  • Amélioration : Ajout d'un filtre de recherche
  • Amélioration : Imiter un menu
  • Amélioration : Créer une liste de vérification interactive
• Liste numérotée, avec lettres ou chiffres romains (ordonnée)
  • De base : liste numérotée, avec lettres ou chiffres romains
  • Amélioration : Étapes stylisées
• Liste de descriptions

Introduction à une liste

Chaque liste nécessite l'un des éléments suivants :

Phrase d'introduction

La plupart des listes comportent un paragraphe introductif qui :

• introduit ou s'applique à tous les éléments
• met en relief le point commun entre les éléments

Si nécessaire, et en gras, précisez « tous », « l’un ou l’autre » « ou », « un ou plusieurs » ou « un » dans le paragraphe introductif pour clarifier si la liste est exhaustive ou conditionnelle.

Exemple - Phrase d'introduction à une liste

• Vous devez répondre à tous les critères ci-dessous :
• Pour être admissible, vous devez répondre à un ou plusieurs des critères ci-dessous :

Paragraphe introductif

Un court paragraphe au-dessus de la liste peut aider à fournir le contexte

Titre descriptif

Pour créer de bons titres, consultez : Titres et sous-titres

Liste à puces (non ordonnée)

De base : Liste à puces

Utilisez une liste non ordonnée lorsque l'ordre des éléments de la liste n'a pas d'importance. Il est plus facile de survoler une courte liste d'éléments verticaux et d'en retenir le contenu qu'un long paragraphe.

Si votre phrase comporte plusieurs virgules, envisagez de la transformer en liste.

Structure

• Présentez une seule idée par puce.
• Utilisez une seule phrase par élément de la liste.
• Si vous devez inclure plus de renseignements pour clarifier une idée, utilisez des sous-puces, mais avec modération.
• Classez les éléments de la liste :
  • par priorité, importance ou popularité
  • par ordre alphabétique (à l’occasion seulement)
    Quand classer par ordre alphabétique

    Présentez le contenu Web en ordre alphabétique seulement s'il s'agit de l'approche la plus logique et intuitive possible pour le public cible.

    Par exemple, l'énumération des provinces et des territoires par ordre alphabétique pourrait être appropriée.

    Si vous présentez du contenu français par ordre alphabétique, présentez aussi le contenu traduit en anglais par ordre alphabétique pour offrir la même expérience intuitive.

• Utilisez des types de texte et de liste similaires de manière cohérente dans un même document.
• Placez les mots le plus importants au début de chaque élément de la liste afin de faciliter le balayage.
  Conséquences sur le français

  Lorsque vous rédigez votre liste, il est important de tenir compte du fait que l’ordre des mots est différent en français et en anglais.

  Les adjectifs sont souvent placés après le nom en français, alors qu’en anglais, ils sont placés avant le nom. Le mot que vous placez au début d’un élément de la liste dans une langue pourrait être déplacé dans l’autre langue.

  Assurez-vous que les mots les plus importants sont placés au début dans les deux langues afin que tous les utilisateurs aient la même expérience Web.

  Exemple : Ordre des mots dans une liste

  Anglais :

  Make a choice based on your province of residence:

  • Alberta tax package
  • British Columbia tax package
  • Manitoba tax package
  • New Brunswick tax package
  • Etc.

  Français :

  Faites un choix en fonction de votre province de résidence :

  • La trousse d’impôt de l’Alberta
  • La trousse d’impôt de la Colombie-Britannique
  • La trousse d’impôt du Manitoba
  • La trousse d’impôt du Nouveau-Brunswick
  • Etc.

  Avec une traduction directe de cet exemple, l’utilisateur francophone ne voit pas le nom de la province en premier et ne peut faire son balayage en ordre alphabétique. En ajoutant une phrase d’introduction expliquant que la liste concerne les trousses d’impôt provinciales, vous pouvez éviter l’utilisation des mots « trousse d’impôt » dans chacun des éléments de la liste et ne conserver que le nom des provinces :

  Anglais :

  Choose the tax package according to your province of residence:

  • Alberta
  • British Columbia
  • Manitoba
  • New Brunswick
  • Etc.

  Français :

  Choisissez la trousse d’impôt selon votre province de résidence :

  • Alberta
  • Colombie-Britannique
  • Manitoba
  • Nouveau-Brunswick
  • Etc.
• Utilisez une structure grammaticale cohérente. Par exemple :
  • Si vous utilisez l'impératif (ou le commandement) pour le premier élément de votre liste, utilisez le même temps de verbe pour chaque élément suivant.
  • Si votre premier élément commence par un nom, les autres éléments de la liste doivent aussi commencer par un nom.
• Si une liste contient plus de 7 éléments, songez à la séparer en différentes catégories.

Exemple - Structurer une liste à puces

Écrivez

Pour rédiger un document source de qualité :

• Organisez vos idées.
  • Ordonnez vos idées par ordre d’importance relativement à la tâche.
  • Testez l’ordre de vos idées avec des représentants de votre public cible.
• Utilisez la voix active.
• Utilisez les mots justes.
• Rédigez des phrases et des paragraphes courts.

Au lieu de

Pour rédiger un document source de qualité :

• Organisez vos idées.
• Ordonnez vos idées par ordre d’importance relativement à la tâche.
• Testez l’ordre de vos idées avec des représentants de votre public cible.
• N’utilisez pas la voix passive.
• Il est important d’utiliser les mots justes.
• N'utilisez que des phrases brèves et des paragraphes courts
• Servez-vous du Guide de rédaction du contenu du site Canada.ca pour vous assurer d’avoir suivi les lignes directrices.

Ton

• Utilisez autant que possible la forme positive.
• Regroupez les éléments rédigés à la forme négative, si vous devez l'utiliser.

Majuscules

Lorsque les listes à puces forment des éléments distincts sur le plan grammatical ou si elles sont introduites par un sous-titre, mettez la première lettre de chaque élément en majuscule.

Lorsque le sens des éléments d'une liste à puces dépend d'une phrase d'introduction, mettez la première lettre de chaque élément en minuscule, sauf s'il s'agit d'un nom propre.

Ponctuation

Ne mettez pas de point d'exclamation ou d'interrogation après les éléments d'une liste.

Terminez les éléments de la liste par un point seulement lorsque l’élément est une phrase complète.

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ul class="list-unstyledlst-nonelist-inline lst-spcd">
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
<li>Élément de liste 3</li>
</ul>

Amélioration : Utiliser des icônes au lieu des puces

Remplacez les puces par des icônes provenant de Font Awesome icon set (en anglais seulement) (version 5.15.4 gratuite qui contient 1608 icônes). Utilisez les icônes avec parcimonie et veillez à ce qu'elles correspondent au contenu de votre liste.

Les icônes peuvent être utilisées de manière efficace pour transmettre un message lorsqu'on utilise un crochet et un X dans une liste à puces.

Utilisation des icônes de crochet et de X

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ul>
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
<li>Élément de liste 3</li>
</ul><ul class="fa-ul">
<li><span class="fas fa-check text-success fa-li"></span>Élément de liste 1</li>
<li><span class="fas fa-check text-success fa-li"></span>Élément de liste 2</li>
<li><span class="fas fa-times text-danger fa-li"></span>Élément de liste 3</li>
<li><span class="fas fa-times text-danger fa-li"></span>Élément de liste 4</li>
</ul>

                           

Amélioration : Affichage sur plusieurs colonnes

Permet de répartir une liste sur 2, 3 ou 4 colonnes. Les colonnes étant similaires aux grilles, elles respectent les mêmes points d'interruption que les grilles.

Utilisation correcte

• À utiliser avec les éléments des listes à puces (non ordonnées).
• Testez la conception dans différentes résolutions d'écran afin d'optimiser le nombre de colonnes pour le téléphone, la tablette ou l'ordinateur.

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ul class="colcount-sm-2colcount-sm-3colcount-sm-4colcount-sm-2 colcount-md-3 colcount-lg-4">
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
<li>Élément de liste 3</li>
<li>...</li>
</ul>

Amélioration : Conception de type et/ou

Utilisez la conception de type et/ou pour démontrer qu'il existe des options ou que des blocs de contenu sont complémentaires ou associés.

Pour en savoir plus, consultez : Conception de type et/ou.

Modèle « Et »

• Contenu de la colonne A

• Contenu de la colonne B

Modèle « Ou »

• Contenu de la colonne A

• Contenu de la colonne B

Amélioration : Ajout d'un filtre de recherche

Appliquez un filtre à une liste unique ou à une série de listes connexes.

Pour en savoir plus, consultez : Filtre BOEW4

Filtre de liste unique

• Alberta
• Colombie-Britannique
• Île-du-Prince-Édouard
• Manitoba
• Nouveau-Brunswick
• Nouvelle-Écosse
• Nunavut
• Ontario
• Québec
• Saskatchewan
• Terre-Neuve et Labrador
• Territoires du Nord-Ouest
• Yukon

Filtre multi-liste

Feuillets T4

• Feuillet T4 : État de la rémunération payée
• Feuillet T4A : État du revenu de pension, de retraite, de rente ou d'autres sources - Impôt sur le revenu des particuliers
• Feuillet T4A (OAS), Relevé de la sécurité de la vieillesse
• Feuillet T4A(P), État des prestations du régime de pensions du Canada
• Feuillet T4E : État des prestations d'assurance-emploi et autres prestations - Impôt sur le revenu des particuliers
• T4RIF État du revenu provenant d'un fonds enregistré de revenu de retraite – renseignements sur le feuillet pour particuliers
• T4RSP État du revenu provenant d’un REER

Feuillets T5

• T5 État des revenus de placements – renseignements sur le feuillet pour les particuliers
• États des prestations T5007
• T5008 État des opérations sur titres – renseignements sur le feuillet pour les particuliers
• T5013 État des revenus d'une société de personnes
• Vous avez reçu un feuillet T1204 ou T5018

Plus de feuillet d'impôt

• T3 État des revenus de fiducie (Répartitions et attributions) – renseignements sur le feuillet pour les particuliers
• T2202 Certificat pour frais de scolarité et d’inscription
• Vous avez reçu un feuillet T1204 ou T5018
• RC62, État de la prestation universelle pour la garde d'enfants
• RC210, État de versements anticipés de l'allocation canadienne pour les travailleurs
• Reçus de renseignements pour les cotisations REER – renseignements sur le feuillet pour les particuliers
• Feuillet de reçu de cotisations RPAC

Amélioration : Imiter un menu

Permet de regrouper des contenus connexes dans un menu. Ce type de menu est généralement utilisé pour les applications et non pour les pages de contenu ordinaires.

Utilisation correcte

• Utilisez la marque « actif » lorsque la cible du lien correspond à l'adresse de la page actuelle.
• Utilisez la composante « badges » pour ajouter une valeur numérique à droite.
  14Boîte de réception 9Non lu
• Utilisez les couleurs suivantes pour styliser les éléments de la liste :
  • Vert : lorsque l'élément est correct
  • Bleu : lorsque l'article est informatif
  • Jaune : lorsque l'élément donne un avertissement à l'utilisateur
  • Rouge : lorsque l'objet ou l'action est dangereux

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ul class="list-group">
<li class="list-group-item list-group-item-info"><span class="badge">14</span><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></li>
<li class="list-group-item list-group-item-success active"><span class="badge">9</span><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></li>
<li class="list-group-item list-group-item-warning"><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></li>
<li class="list-group-item list-group-item-danger"><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></li>
</ul><div class="list-group" role="list">
<a role="list-item" class="list-group-item list-group-item-info"><span class="badge">14</span><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></a>
<a role="list-item" class="list-group-item list-group-item-success active"><span class="badge">9</span><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></a>
<a role="list-item" class="list-group-item list-group-item-warning"><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></a>
<a role="list-item" class="list-group-item list-group-item-danger"><h4 class="list-group-item-heading">Titre</h4>Élément de la liste<p class="list-group-item-text">Élément de la liste</p></a>
</div>

Amélioration : Créer une liste de vérification interactive

Les listes de vérification aident les personnes à séparer des listes complexes sur l’admissibilité pour s'assurer qu'elles répondent à tous les critères.

Étant donné que les coder est plus complexe et nécessite un JavaScript personnalisé, vous devez contacter weboptimizg@cra-arc.gc.ca avant de les mettre en œuvre.

Soutenir la recherche

Le Bureau de la transformation numérique (BTN) a étudié l'utilisation des listes de vérification interactives pour simplifier la façon dont nous présentons les critères d'admissibilité.

Consultez : Utilisation de listes de vérification interactives pour simplifier les critères d'admissibilité

Liste numérotée, avec lettres ou chiffres romains (ordonnée)

De base : liste numérotée, avec lettres ou chiffres romains

Utilisez une liste ordonnée pour énumérer les éléments lorsque l'ordre a de l'importance.

Structure

Liste numérotée

• Utilisez des listes numérotées pour montrer :
  • un classement
  • une ordre
  • une priorité
  • des instructions étape par étape

Liste avec lettres

• A utiliser pour afficher des lettres au lieu de chiffres.
• À éviter, car les listes avec lettres ne sont pas un moyen habituel d'afficher des informations.
• Utilisé principalement dans les documents juridiques ou pour les sous-étapes lorsqu'il est combiné avec des chiffres (comme les étapes 1a, 1b, 1c).

Liste avec chiffres romains

• À utiliser pour afficher les chiffres romains (I, II, III, IV ou i, ii, iii, iv...) au lieu des chiffres arabes (1, 2, 3, 4...).
• À éviter, car de nombreuses personnes ne comprennent pas les chiffres romains.
• Utilisé principalement dans les documents juridiques.

Majuscules

Lorsque les listes à puces forment des éléments distincts sur le plan grammatical ou si elles sont introduites par un sous-titre, mettez la première lettre de chaque élément en majuscule.

Lorsque le sens des éléments d'une liste à puces dépend d'une phrase d'introduction, mettez la première lettre de chaque élément en minuscule, sauf s'il s'agit d'un nom propre.

Ponctuation

Ne mettez pas de point d'exclamation ou d'interrogation après les éléments d'une liste.

Terminez les éléments de la liste par un point seulement lorsque l’élément est une phrase complète.

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ol class="lst-lwr-alphlst-upr-alphlst-lwr-rmnlst-upr-rmn lst-spcd">
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
<li>Élément de liste 3</li>
</ol>

Amélioration : Étapes stylisées

À utiliser lorsqu'une tâche peut être divisée en étapes et en sous-étapes.

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<ol class="lst-stps stps-strpd">
<li>
    <h3>L'en-tête va ici</h3>
    ...
  </li>
<li>
    <h3>L'en-tête va ici</h3>
    ...
  
    <ol class="lst-stps-sub stps-strpd">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
</li>
<li>
    <h3>L'en-tête va ici</h3>
    ...
  </li>
</ol><section class="lst-stps stps-strpd">
<div class="lst-stps-itm">
<h3><span class="wb-inv">Étape 1</span> Titre</h3>
<p>...</p>
</div>
<div class="lst-stps-itm">
<h3><span class="wb-inv">Étape 2</span> Titre</h3>
<p>...</p>
    <section class="lst-stps-sub stps-strpd">
<div class="lst-stps-itm">
  <h3><span class="wb-inv">Étape 2a</span> Sous-titre</h3>
  <p>...</p>
</div>
<div class="lst-stps-itm">
  <h3><span class="wb-inv">Étape 2b</span> Sous-titre</h3>
  <p>...</p>
</div>
<div class="lst-stps-itm">
  <h3><span class="wb-inv">Étape 2c</span> Sous-titre</h3>
  <p>...</p>
</div>
</section>
</div>
<div class="lst-stps-itm">
<h3><span class="wb-inv">Étape 3</span> Titre</h3>
<p>...</p>
<p>...</p>
</div>
</section>

Liste de descriptions

Permet d'établir une liste de termes avec les descriptions ou définitions qui leur sont associées.

Structure

Composée de 2 parties :

• Le terme (mots isolés ou petites phrases)
• La description (peut varier en taille d'une simple déclaration à un grand bloc de contenu)

Majuscules

Le premier mot du terme et le premier mot de la description prennent une majuscule.

Ponctuation

• N’utilisez pas de ponctuation avec le terme lui-même.
• Si la description n’est pas une phrase complète, ne la terminez pas par un point.
• Si la description comporte plus d'une phrase, terminez-les par des points.

Apparence et code

Des éléments de conception peuvent être appliqués. Examinez les options et obtenez le code.

<dl class="dl-horizontaldl-horizontal brdr-0">
<dt>Terme 1</dt>
<dd>Description du terme 1</dd>
<dt>Terme 2</dt>
<dd>Description du terme 2</dd>
<dt>Terme 3</dt>
<dd>Description du terme 3</dd>
</dl>