listbox

Quand l’utiliser

Utilisez <select> (sélection simple) ou <select multiple> dès que possible. L’élément natif fournit l’intégralité du modèle d’interaction, y compris la gestion clavier conforme à la plateforme.

role="listbox" est approprié lorsque :

• La listbox est le popup d’une combobox personnalisée.
• Vous avez besoin de contenu d’option enrichi (icônes, texte secondaire) que <select> ne peut pas afficher.
• Vous avez besoin d’une sélection multiple avec un style de coche personnalisé.
• Vous construisez une liste de transfert ou un sélecteur filtrable.

Les enfants doivent être de type role="option" (role="group" est autorisé comme enveloppe intermédiaire pour le sectionnement). Définissez aria-multiselectable="true" pour les listbox à sélection multiple.

Contrat clavier + focus

Conformément au modèle APG listbox :

• Tab déplace le focus vers la listbox ; Tab en sort. À l’intérieur, le focus reste sur le conteneur et l’option « active » est suivie via aria-activedescendant.
• Les flèches Haut/Bas déplacent l’option active.
• Début / Fin sautent à la première / dernière option.
• Sélection simple : chaque pression de flèche sélectionne également l’option active.
• Sélection multiple : Espace bascule la sélection de l’option active ; Maj+Flèche étend une plage contiguë ; Ctrl/Cmd+A sélectionne tout.
• Anticipation de frappe : taper une lettre saute à la prochaine option commençant par cette lettre.

Erreurs courantes

• Déplacer le focus DOM sur chaque option au lieu d’utiliser aria-activedescendant. Casse l’anticipation de frappe et l’intégration avec la combobox.
• Enfants role="option" sans attributs id — aria-activedescendant ne peut pas les référencer.
• Listbox à sélection multiple sans aria-multiselectable="true". Les lecteurs d’écran l’annoncent comme à sélection simple.
• La listbox possède des options situées ailleurs dans le DOM sans utiliser aria-owns pour rendre la relation explicite.
• Utiliser role="listbox" pour une liste statique d’éléments en lecture seule. C’est role="list", pas listbox — listbox implique de l’interactivité.

Exemple

<label id="topicsLabel">Pick your topics</label>
<ul
  role="listbox"
  aria-labelledby="topicsLabel"
  aria-multiselectable="true"
  tabindex="0"
  aria-activedescendant="topic-1"
>
  <li id="topic-1" role="option" aria-selected="true">Accessibility</li>
  <li id="topic-2" role="option" aria-selected="false">Assistive tech</li>
  <li id="topic-3" role="option" aria-selected="true">Standards</li>
</ul>