Liste déroulante Dans un formulaire, la liste déroulante est utilisée lorsque l’utilisateur doit faire un seul choix parmi une liste d’options. Elle est une alternative aux cases à cocher lorsqu’une liste d’options est très longue. Exemples Les exemples ci-dessous reproduisent les variantes des listes déroulantes, en incluant celle avec une aide à la saisie et celle avec une consigne. Les champs en erreur peuvent être vus en laissant vides les boutons et en cliquant sur Suivant. Liste déroulante Texte pour consigne - Sélectionner -Choix AChoix BChoix C Liste déroulante avec étiquette personnalisée Étiquette personnaliséeChoix AChoix BChoix C Liste déroulante avec valeur par défaut - Sélectionner -Choix AChoix BChoix C Liste déroulante (facultatif) Texte d’aide à la saisie - Aucun(e) -Choix AChoix BChoix C Laisser ce champ vide Accessibilité L’étiquette de la liste déroulante doit être à proximité de la liste déroulanteL’étiquette de la liste déroulante doit être codée dans une balise <label>La balise <label> doit être liée à la liste déroulanteLa sélection d’un élément de la liste ne doit jamais déclencher une action qui déplacerait le focus ou naviguerait vers une autre page Information complémentaire au champ Ne pas oublier que tout texte apportant de l’information complémentaire à la liste déroulante (un signe de $, une consigne, le message d’erreur) doit y être lié. Pour ce faire, il faut : Ajouter l’attribut aria-describedby sur la liste déroulanteAjouter l’attribut id sur la balise contenant le texte (<p>, <span>, <div>)Lier l’attribut aria-describedby à l’attribut id (aria-describedby="id du texte")
