Dropdown - Liste déroulante

Bouton permettant d'afficher différentes options
dans une liste.

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Pas de rôle ARIA
  • Attributs ARIA utilisés :
    • aria-hidden="true" sur le panneau (fermé par défaut)

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

open

Affiche le panneau et modifie la valeur de aria-hidden sur le panneau.

Ajoute un attribut aria-expanded=”true” sur l’élément déclencheur.

⚠️ Pour donner plus de liberté dans son utilisation, le dropdown ne se ferme pas à l'activation d'éléments qu'il contient. Utilisez l’attribut open pour le contrôler.

 

Navigation et interaction clavier

Touches supportées :

  • Esc → Ferme le panneau
  • Tab → Fermeture du panneau si le focus devait en sortir
  • Espace, Entrer → Sur l’élément déclencheur, ouverture/fermeture du panneau

Gestion du focus :

  • À la fermeture, retour du focus sur l'élément qui a déclenché l'ouverture du panneau.

 

 

Bonnes pratiques et pièges à éviter

 

Référence