Skip to Main Content

Menus déroulants

Un menu déroulant permet à l’utilisateur de faire un choix dans une liste d’options mutuellement exclusives prédéfinies.

Utilisez-les lorsque :

  • L’utilisateur doit faire un seul choix dans une liste d’options mutuellement exclusives.
  • L’utilisateur doit faire un choix dans un grand nombre de données qu’il serait peu pratique de présenter sous la forme de liste de boutons radio.
  • L’utilisateur doit modifier une option par défaut.
  • L’utilisateur peut choisir deux options dans une liste de cases à cocher dans un menu déroulant.

Composant interactif

Le message d'erreur va ici.

Menu déroulant personnalisé

Vous trouverez les formats HTML, CSS et JS ci-dessous :

Télécharger les fichiers

Angulaire 2

<mat-select> est un contrôle de formulaire permettant de sélectionner une valeur à partir d’un ensemble d’options, comme l’élément <select> natif.

Vous pouvez en apprendre davantage sur les sélections dans les spécifications de conception des articles. Il est conçu pour fonctionner à l’intérieur d’un élément <mat-form-field>.

Pour ajouter des options à la sélection, ajoutez des éléments <mat-option> à <mat-select>.

Chaque <mat-option> a une propriété de valeur qui peut être utilisée pour établir la valeur qui sera sélectionnée si l’utilisateur choisit cette option.

Le contenu the est ce qui sera affiché à l’utilisateur.

Un article angulaire permet également l’utilisation de l’élément <select> natif à l’intérieur de <mat-form-field>. Le contrôle natif présente plusieurs avantages en matière de performance, d’accessibilité et de convivialité.

Pour utiliser une sélection native à l’intérieur de <mat-form-field>,, ajoutez l’élément matNativeControl correspondant à l’élément <select>.

Consultez la documentation pour obtenir plus de renseignements sur l’élément form-field.

Télécharger les fichiers


Mendix

Les listes déroulantes sont une fonctionnalité prête à l’emploi.

Vous n’avez qu’à sélectionner l’option de liste déroulante dans la trousse d’outils à droite.

Les styles de listes déroulantes devraient être appliqués automatiquement ainsi que les styles de leurs états d’erreur.

La trousse d’outils Mendix se trouve ici.

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular HTML

Angular

Étape 1. Installer

Effectuez la commande suivante pour installer ce composant.

npm i [NPM-PLACE-HOLDER]/ds-dropdown

Étape 2. Importer

Importer les éléments suivants dans votre dossier app.module.ts.

import { DsDropdownModule } from 'ds-dropdown';

D’extrait de code

<cpc-ds-dropdown
    labelText="Default State"
    labelId="dropdown-label"
    [selectOptions]="selectOptions"
    [selected]="selected"
    [control]="selectFormControl"
    errorMsgRequired="Please select an option">
</cpc-ds-dropdown>
Propriétés
Nom Type Défaut Description
labelId string LabelId

Identifiant de l’étiquette du menu déroulant.
labelText string Default label

Texte de l’étiquette du menu déroulant.
selectOptions array  

Options et valeurs du menu déroulant.


interface SelectOptions { name: string; value: string; } selectOptions: SelectOptions[] = [ { name: '---', value: '' }, { name: 'Dog', value: 'Woof!' }, { name: 'Cat', value: 'Meow!' }, { name: 'Cow', value: 'Moo!' } ];
selected string  

Valeur sélectionnée dans le menu déroulant.
errorMsgRequired string Please select an option.

Message d’erreur pour le menu déroulant.
control Form control  

La classe FormControl pour le menu déroulant.

selectFormControl = new FormControl(this.selectOptions[0].value, Validators.required);

HTML

Étape 1: Importer CSS

Importez ce qui suit dans votre thème ou page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Étape 2 : Importer le fichier JavaScript et initialiser le composant

<script src="[JS-PLACE-HOLDER]"></script> 
<script>DSCpcSelects.init();</script>

D’extrait de code

<label id="custom-dropdown-label">Choose year</label>
<select 
    id="custom-dropdown" 
    aria-labelledby="custom-dropdown-label errMsg1" 
    aria-invalid="true" 
    class="ds-cpc-control-select__tpl error" 
    style="display: none;">
 <option selected="selected" value="">Select year</option>
 <option value="2013">2013</option>
 <option value="2012">2012</option>
 <option value="2011">2011</option>
</select>

<div id="errMsg1" class="ds-error">Error message goes here</div>
Lignes directrices générales Interaction Facteurs à prendre en compte en matière d’accessibilité Spécifications du design

Lignes directrices générales

Le menu déroulant affiche une liste d’options que l’utilisateur peut sélectionner. Il comprend une étiquette de menu déroulant, un champ de saisie, le texte du champ de saisie et les options du menu.

Il faut utiliser les menus déroulants lorsqu’il y a entre six et 15 options à afficher. Veillez à ce que les menus déroulants soient brefs pour éviter que l’utilisateur ait à faire défiler l’écran. La barre de défilement doit être permanente. Faites en sorte, dans la mesure du possible, que les utilisateurs puissent voir toutes les options disponibles dès le départ.

Envisagez d’utiliser des boutons radio ou des cases à cocher si vous avez moins de six options.

Si vous proposez plus de 15 options, songez à employer un champ de saisie ouvert (p. ex., en demandant à l’utilisateur l’année de sa naissance). Vous pouvez également permettre aux utilisateurs de filtrer les options du menu en tapant des lettres. Par exemple, s’ils veulent choisir « France », ils peuvent cliquer sur le champ du menu et commencer à taper F, R pour passer à « France » dans la liste.

Ordonner les éléments du menu

Utilisez le contexte pour ordonner les options d’un menu déroulant. Lorsque l’organisation contextuelle n’est pas disponible, placez les options par ordre alphabétique ou selon une échelle (p. ex., du plus jeune au plus vieux lors de la sélection d’une tranche d’âge).

  • Dans la mesure du possible, proposez une option neutre (p. ex., « Aucun ») au cas où aucune option ne s’appliquerait à l’utilisateur.

Positionnement

Les menus déroulants sont superposés sur un formulaire. Si les menus déroulants contiennent des renseignements connexes, placez-les côte à côte (p. ex., sélection d’une plage horaire).

Positioning

Étiquettes

Placez une étiquette descriptive au-dessus du menu déroulant pour indiquer clairement aux utilisateurs les options auxquelles ils peuvent s’attendre. En outre, cela permet à l’utilisateur de se concentrer sur la tâche qu’il tente d’effectuer.

Design réactif

L’interface utilisateur des menus déroulants est semblable pour les différents appareils.

Travaillez avec votre rédacteur afin que le texte soit court et concis.

Si le texte est trop long pour être affiché en entier sur un appareil plus petit, tronquez-le au moyen d’une ellipse. Une troncature se produit d’ordinaire de façon automatique pour les éléments du menu qui comptent environ 36 caractères (selon l’appareil mobile de l’utilisateur).

Interaction

États

Un menu déroulant comprend un élément d’en-tête interactif qui montre l’option sélectionnée et les éléments du menu volant qui montre les options disponibles.


  1. Par défaut
    L’état par défaut correspond à la façon dont le menu déroulant s’affiche avant que les utilisateurs fassent une sélection.

    Dans certains cas, vous pouvez prévoir au menu une option présélectionnée, mais seulement si vous êtes certain que la plupart des utilisateurs la choisiront.

  2. Mise en évidence
    Les menus déroulants comportent un champ de focalisation et un menu de focalisation.

    Le champ de focalisation est activé lorsqu’un utilisateur navigue vers un élément du menu déroulant. Cet état s’active en encadrant le menu déroulant dans une boîte, ce qui indique que d’autres interactions l’ouvriront.

    Le menu de focalisation s’active après l’ouverture d’un menu déroulant en mettant en évidence l’élément du menu sélectionné. L’utilisation du clavier pour naviguer parmi les éléments déplacera l’état de focalisation en conséquence.

  3. Curseur au-dessus d’un élément
    Lorsqu’une souris passe au-dessus d’un élément du menu, l’élément est mis en évidence.
  4. Désactivé :
    Dans l’état désactivé, un menu déroulant est visible, mais il est impossible de l’utiliser. Les couleurs pâles permettent de distinguer les menus déroulants désactivés des menus déroulants activés.

Default

Default

Field focus

Field focus

Menu focus / hover

Menu focus/hover

Disabled

Default

Rétroaction

Messages d’erreur

Un message d’erreur s’affiche sous le menu déroulant.

Messages d’erreur

Facteurs à prendre en compte en matière d’accessibilité

Accessibilité du clavier

Les utilisateurs naviguent vers les menus déroulants au moyen d’onglets, accédant aux options et naviguant entre celles-ci à l’aide des touches de direction. L’utilisation de la touche Entrée ou de la barre d’espacement confirmera sa sélection.

Spécifications du design

Pour toutes les tailles d’écran.

Dropdown menu

Exigences d’espacement pour le menu déroulant

Error message

Texte du message d’erreur
Lignes directrices générales À faire et à ne pas faire

Lignes directrices générales

Utilisez des phrases claires, concises et descriptives afin d’aider l’utilisateur à sélectionner une option dans le menu déroulant. Attendez-vous à ce que l’utilisateur lise rapidement les options de la liste. Utilisez une seule ligne de texte pour chaque option.

  Lignes directrices Exemples
Longueur recommandée Suffisante pour que l’idée soit claire, mais essayez de vous en tenir à une seule ligne
Saut de ligne À éviter
Formulation Phrases courtes expliquant chaque option
Majuscule Majuscule en début de phrase

À faire et à ne pas faire

Deuxième étiquette pertinente

Ajoutez une deuxième étiquette pertinente dans le menu lui-même afin d’inciter à l’action. Cette étiquette doit être visible dans le menu avant que l’utilisateur clique sur celui-ci pour l’ouvrir.

  • Choisir une province
  • Choisir

Ordonner les options

Prenez en considération le contexte afin de classer les options dans un ordre logique. Lorsque la pertinence ou la fréquence ne s’applique pas, classez les options en ordre alphabétique ou sur une échelle.

Suggestions de lecture supplémentaire :

Concepteurs

Trousse de design graphique
Typographie

Développeurs

HTML <select> élémentOuvre dans un nouvel onglet
Accessibilité

Auteurs

Organisation du contenu
Voix et ton

Option neutre

Lorsque possible, offrez une option neutre dans le menu au cas où aucune option ne s’applique à l’utilisateur.

  • Dans quelle mesure êtes-vous satisfait(e) de l’application mobile de Postes Canada?

  • Quelle est la principale raison pour laquelle vous utilisez l’application aujourd’hui?

Lignes directrices

Halo de saisie

Les menus déroulants doivent avoir un contour de mise en évidence bien visible lorsqu’ils sont en état de survol ou de mise en évidence. Les options dans le menu déroulant doivent également être mises en évidence lorsqu’elles sont en état de survol ou de mise en évidence.

Interaction avec le clavier

Lorsque le menu déroulant est mis en évidence :

  • La touche Alt + la flèche vers le bas affiche le menu des options (état développé).
  • La touche Entrée affiche le menu des options (état développé).
  • La barre d’espacement affiche le menu des options (état développé).
  • La flèche vers le bas sélectionne la prochaine option dans les cases multiples.
  • La flèche vers le haut sélectionne l’option précédente dans les cases multiples.

Lorsque le menu déroulant est développé et que le menu des options est en état de mise en évidence :

  • La touche Entrée sélectionne l’option mise en évidence et réduit le menu des options.
  • La touche Fin met en évidence la dernière option.
  • La touche de début met en évidence la première option.
  • La flèche vers le bas met en évidence l’option suivante.
  • La flèche vers le haut met en évidence l’option précédente.

Test

Au moment de tester menu déroulant, le testeur doit s’assurer de ce qui suit :

  • Le menu déroulant est entièrement accessible au moyen du clavier.
  • Les indications concernant les états de survol et de mise en évidence sont claires et bien en vue.
  • Le menu déroulant a le rôle d’un « combobox ».
  • Le lecteur d’écran annonce l’étiquette déroulante, le rôle, sa valeur actuelle, l’état (développé/réduit), le texte d’aperçu (le cas échéant) et le texte d’erreur (le cas échéant).