option

Quand l’utiliser

Utilisez <option> dans un <select>. L’élément natif prend en charge tous les comportements sans effort supplémentaire.

role="option" est destiné aux éléments à l’intérieur d’un role="listbox" personnalisé — généralement le popup d’une combobox ou d’un sélecteur multi-valeur que le natif ne permet pas de styliser. Chaque élément option DOIT avoir un id unique pour que la combobox ou la listbox parente puisse le référencer via aria-activedescendant.

Si votre option représente un choix de type case à cocher dans une listbox multi-sélection, définissez aria-selected="true". Utilisez aria-checked uniquement pour le rare modèle option-avec-coche (la plupart des listbox multi-sélection utilisent aria-selected).

Échecs courants

• role="option" hors d’un parent role="listbox". Le lecteur d’écran annonce une option orpheline sans contexte de groupe.
• id manquant sur une option qui doit être la cible d’aria-activedescendant — la combobox ne peut pas y pointer.
• Basculer une classe CSS .selected sans mettre à jour aria-selected. L’apparence visuelle et l’arbre d’accessibilité divergent.
• aria-selected="false" sur toutes les options d’une listbox mono-sélection où l’une doit être la valeur par défaut. Définissez aria-selected="true" sur l’une d’elles.
• Des options qui sont elles-mêmes des boutons ou des liens (<a role="option">). La sémantique option écrase la sémantique lien dans la technologie d’assistance, mais le comportement au clic reste — ce qui prête à confusion.

Exemple

<label id="lang">Language</label>
<ul
  role="listbox"
  aria-labelledby="lang"
  tabindex="0"
  aria-activedescendant="lang-2"
>
  <li id="lang-1" role="option" aria-selected="false">English</li>
  <li id="lang-2" role="option" aria-selected="true">Spanish</li>
  <li id="lang-3" role="option" aria-selected="false">French</li>
</ul>