Que faut-il pour rendre un menu déroulant personnalisé accessible ?

Commencez par essayer un select natif, puisque vous obtenez gratuitement la gestion du clavier, du focus et le comportement des lecteurs d'écran. Si la maquette l'exclut, implémentez correctement le motif listbox ou combobox : gérez le focus vous-même, prenez en charge les flèches, Home, End, Escape et la saisie rapide, câblez aria-expanded, aria-activedescendant et les bons rôles, et rendez le focus au déclencheur à la fermeture.

Mon premier réflexe, c'est de pousser pour ne pas en construire du tout, parce qu'un select natif vous donne la gestion du clavier, les sélecteurs mobiles et les annonces de lecteur d'écran sans une ligne de code, et la plupart des maquettes peuvent être respectées en le stylant. Quand on a vraiment eu besoin d'un composant personnalisé, pour une sélection multiple avec des avatars, je l'ai construit selon le motif listbox des ARIA authoring practices plutôt qu'en improvisant. Ça voulait dire que le déclencheur est un vrai bouton avec aria-expanded et aria-controls, que le popup a role listbox avec des options qui ont role option et aria-selected, et que je suis l'option active avec aria-activedescendant pour que le focus reste sur le champ. Côté clavier, il faut haut et bas, Home et End, Escape pour fermer et rendre le focus au déclencheur, Enter ou Espace pour sélectionner, et la saisie rapide pour sauter. Ce que je dis toujours, c'est qu'ARIA ne fait qu'annoncer un état ; ça n'ajoute aucun comportement, donc un div avec role button et sans gestionnaire de touche est pire qu'inutile. Je teste au clavier seul, puis avec un lecteur d'écran, avant que ça s'approche d'une revue.