Liste de descriptions

Une liste de descriptions présente des faits compacts avec libellé. Utilisez les éléments sémantiques <dl>, <dt> et <dd>, avec un <div> englobant pour chaque paire de terme et de valeur. La classe partagée .description-list maintient la colonne des libellés et place la valeur sous celle-ci sur les écrans étroits.

Exemple#

Variantes#

• Utilisez une valeur dans un simple <dd> lorsqu’elle est courte
• Ajoutez description-list-values à un <dd> qui contient plusieurs fichiers, liens ou autres valeurs distinctes
• La mise en page empile chaque paire sur les écrans étroits et utilise une colonne fixe pour les libellés à partir du petit point de rupture

Quand l’utiliser#

• Des faits compacts avec libellé que les lecteurs consultent comme des termes et des valeurs
• Des manifestes d’interface, des détails d’enregistrement et des métadonnées stables de page
• Pas pour des définitions rédigées, des comparaisons tabulaires ou des champs modifiables

Implémentation#

<dl class="description-list">
  <div>
    <dt>Libellé</dt>
    <dd>Valeur</dd>
  </div>
</dl>

Le CSS partagé dans assets/css/site.css fournit les bordures, la grille responsive à deux colonnes, le traitement des libellés et l’empilement des valeurs multiples. Ne remplacez pas les éléments sémantiques par des paires génériques de <div> ou de <span>.

Accessibilité#

• Utilisez <dl> seulement lorsque chaque <dt> est un terme, un libellé ou un nom pour la valeur <dd> qui lui est associée
• Gardez chaque <dt> et <dd> dans le même <div> englobant afin que la paire reste intacte dans les mises en page réactives
• Placez les liens dans la valeur lorsque la valeur mène vers une destination; les libellés restent du texte simple, sauf lorsqu’ils requièrent leur propre action indépendante
• N’utilisez pas une liste de descriptions pour un groupe de contrôles ou une table de données avec en-têtes de colonne