Dans vos listes déroulantes comportant de nombreuses options, les choix sont-ils organisés en groupes logiques ?
Critère officiel 11.8 — Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupés de manière pertinente ?
Pourquoi c'est important
Une liste déroulante de 30 options sans organisation force l'utilisateur à tout parcourir de haut en bas. Un logiciel de lecture lit chaque option à la suite, sans pouvoir signaler qu'il existe des catégories. L'utilisateur ne peut pas sauter directement à la section qui l'intéresse.
Exemples concrets
Ce qui est conforme
La liste déroulante « Type de demande » est organisée en trois groupes : « État civil » (naissance, mariage, décès), « Urbanisme » (permis, déclaration de travaux), « Vie associative » (subvention, réservation de salle). Le logiciel de lecture annonce le nom du groupe avant ses options.
Ce qui pose problème
La même liste propose 25 types de demande dans l'ordre alphabétique sans aucun regroupement. « Autorisation de voirie » côtoie « Acte de naissance » côtoie « Subvention association » — l'utilisateur doit parcourir toute la liste pour trouver ce qu'il cherche.
Comment agir
Pour tout menu déroulant de plus de 8 à 10 options, demandez à votre prestataire de regrouper les choix par catégorie logique. Fournissez-lui le plan des catégories par écrit lors de la conception du formulaire — il implémentera les groupes d'options avec les balises techniques appropriées.
Règles clés
- Utiliser <optgroup label='Nom du groupe'> pour regrouper les options de même nature.
- Le label de l'optgroup est annoncé à l'entrée dans le groupe.
- Non requis si le select a peu d'options (< 10) toutes de même nature.
Erreurs fréquentes
- Select de pays (150 options) sans optgroup géographique
- Select de catégories mélangées sans regroupement
Exemples de code
select sans regroupement
✗ Non conforme<select name="pays">
<option>Allemagne</option>
<option>Belgique</option>
<option>Canada</option>
<option>France</option>
<!-- 150 pays sans structure -->
</select>150 options sans structure. Le lecteur d'écran les lit une par une sans contexte.
select avec optgroup
✓ Conforme<select name="pays">
<optgroup label="Europe">
<option value="BE">Belgique</option>
<option value="FR">France</option>
<option value="CH">Suisse</option>
</optgroup>
<optgroup label="Amérique du Nord">
<option value="CA">Canada</option>
<option value="US">États-Unis</option>
</optgroup>
</select>Annoncé : 'Europe, groupe' avant les pays européens — navigation structurée.
Référence WCAG : 1.3.1