Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupés de manière pertinente ?
Un utilisateur de lecteur d’écran navigue dans un <select> de 40 options en appuyant sur les flèches. Si ces options mélangent des continents, des pays et des territoires sans aucun regroupement, il n’a aucun repère pour s’orienter. Il parcourt tout, linéairement.
Ce critère impose une règle claire : quand des options d’un <select> appartiennent à des familles distinctes, vous les regroupez avec des éléments <optgroup>. Chaque groupe doit porter un attribut label nommant la catégorie de façon pertinente. Un label="Groupe 1" ne vaut pas mieux que l’absence de groupe.
Le lecteur d’écran annonce le nom du groupe avant d’énumérer ses options. L’utilisateur sait immédiatement dans quelle section il se trouve et peut décider de la passer ou d’y entrer. Trois tests enchaînent cette vérification : les items sont-ils regroupés ? Les groupes ont-ils un label ? Ce label est-il pertinent ?
3 tests pour contrôler le regroupement cohérent des options dans les listes de choix
Regroupement des <option> de même nature dans <optgroup>
- Repérez tous les
<select>de la page. - Pour chaque
<select>, demandez-vous si les options peuvent se regrouper par nature (exemples : fruits et légumes, pays par continent, formats par type de fichier). - Si oui, vérifiez que ces groupes sont matérialisés avec des éléments
<optgroup>dans le code source. - Si tous les
<select>concernés utilisent<optgroup>, le test est validé. Un seul groupe naturel absent suffit à faire échouer le test.
Présence d'un attribut label sur chaque <optgroup>
- Repérez tous les
<select>qui contiennent au moins un<optgroup>. - Pour chaque
<optgroup>trouvé, inspectez le code source : l’attributlabelest-il présent ? - Si tous les
<optgroup>ont un attributlabel, le test est validé. Un<optgroup>sanslabelsuffit à faire échouer le test.
Pertinence du label de chaque <optgroup>
- Repérez tous les
<optgroup>qui ont un attributlabel. - Pour chaque
label, évaluez sa pertinence : décrit-il clairement la catégorie des options qu’il regroupe ? - Un
labelvide, générique ("Groupe 1","Divers"sans contexte explicatif) ou trompeur échoue au test. - Si tous les
labelsont pertinents, le test est validé.
Exemples
❌ Non conforme : Liste de sélection sans regroupement
<label for="animal">Choisissez un animal</label>
<select id="animal" name="animal">
<option value="">-- Sélectionner --</option>
<option value="chat">Chat</option>
<option value="chien">Chien</option>
<option value="lapin">Lapin</option>
<option value="perroquet">Perroquet</option>
<option value="canari">Canari</option>
<option value="tortue">Tortue</option>
<option value="serpent">Serpent</option>
</select>Les options mélangent mammifères, oiseaux et reptiles sans distinction. Un utilisateur de lecteur d’écran entend les huit options à la suite, sans savoir à quelle famille chaque animal appartient. La navigation est plus lente et l’orientation impossible.
✅ Conforme : Liste de sélection avec regroupement pertinent
<label for="animal">Choisissez un animal</label>
<select id="animal" name="animal">
<option value="">-- Sélectionner --</option>
<optgroup label="Mammifères">
<option value="chat">Chat</option>
<option value="chien">Chien</option>
<option value="lapin">Lapin</option>
</optgroup>
<optgroup label="Oiseaux">
<option value="perroquet">Perroquet</option>
<option value="canari">Canari</option>
</optgroup>
<optgroup label="Reptiles">
<option value="tortue">Tortue</option>
<option value="serpent">Serpent</option>
</optgroup>
</select>Le lecteur d’écran annonce « Mammifères » avant d’énumérer Chat, Chien, Lapin, puis « Oiseaux » avant Perroquet et Canari. L’utilisateur comprend immédiatement la structure et peut naviguer par catégorie. Les utilisateurs voyants voient également les intitulés de groupe affichés visuellement par le navigateur, sans CSS supplémentaire.
❌ Non conforme : Groupe avec label non pertinent
<label for="pays">Sélectionnez un pays</label>
<select id="pays" name="pays">
<optgroup label="Groupe 1">
<option value="fr">France</option>
<option value="be">Belgique</option>
<option value="ch">Suisse</option>
</optgroup>
<optgroup label="Groupe 2">
<option value="de">Allemagne</option>
<option value="at">Autriche</option>
</optgroup>
</select>L’attribut label est présent, mais « Groupe 1 » et « Groupe 2 » ne transmettent aucune information. Le lecteur d’écran annonce ces intitulés vides de sens. Les labels pertinents auraient été « Pays francophones » et « Pays germanophones ». Ce cas échoue au test 11.8.3.
Astuces et pièges
⚠️ Un <optgroup> sans label est pire qu’un <optgroup> absent
Un <optgroup> dépourvu d’attribut label échoue au test 11.8.2, mais les conséquences vont plus loin : certains lecteurs d’écran annoncent une chaîne vide avant chaque groupe, d’autres ignorent le regroupement silencieusement. Le résultat varie selon la combinaison navigateur et AT. Toujours spécifier label.
⚠️ Croire qu’un petit <select> n’a pas besoin de regroupement
Ce n’est pas une question de taille. Un <select> de 8 options mélangeant des unités de mesure (longueur, masse, volume) nécessite des <optgroup>. Un <select> de 30 options toutes de même nature, comme 30 pays d’une même région, n’en a pas besoin. La clé, c’est l’hétérogénéité des options, pas leur nombre.
💡 Le <optgroup> est un en-tête, pas une option sélectionnable
L’intitulé d’un <optgroup> ne peut pas être sélectionné par l’utilisateur. C’est un comportement natif du navigateur, sans JavaScript requis. Si vous avez besoin d’une option neutre en début de liste, ajoutez une <option> placeholder (<option value="">-- Sélectionner --</option>) avant le premier <optgroup>.
⚠️ Impossible d’imbriquer des <optgroup>
La spécification HTML n’autorise pas les <optgroup> imbriqués. Si votre liste a des sous-catégories, vous devez les aplatir ou revoir l’interaction. Une solution fréquente : préfixer les options de sous-niveau avec un tiret (– Option fine). Pour des arborescences profondes, passez à un composant personnalisé avec role="listbox" et role="group".
⚠️ Aucun regroupement requis si toutes les options sont de même nature
Si votre <select> liste 20 langues, 50 villes d’un même pays ou 12 mois de l’année, il n’y a pas de groupes de nature différente à former. Le critère 11.8 ne s’applique pas. L’obligation de regroupement apparaît dès que des catégories distinctes et nommables coexistent dans la liste.
Questions fréquentes
Comment déterminer si des options d'un <select> forment des groupes de même nature selon le RGAA ?
Posez-vous la question : si vous deviez trier ces options dans des boîtes étiquetées, combien de boîtes distinctes obtiendriez-vous ? Dès que la réponse dépasse 1 et que ces boîtes ont des noms évidents (animaux domestiques et animaux de ferme, pays d’Europe et pays d’Asie, formats audio et formats vidéo), l’utilisation d’<optgroup> est requise par le critère 11.8.
Comment le label de l'<optgroup> est-il affiché visuellement dans les navigateurs pour le RGAA ?
Oui. Les navigateurs affichent le label de l’<optgroup> comme un en-tête visuel dans la liste déroulante, généralement en gras et non cliquable. Ce rendu bénéficie autant aux utilisateurs voyants qu’aux utilisateurs de lecteurs d’écran. C’est un comportement natif, sans CSS ni JavaScript requis.
Comment auditer le critère RGAA 11.8 sur les listes de choix en pratique ?
Deux approches complémentaires. En inspection du code : cherchez les <select> dans le DOM, vérifiez la présence d’<optgroup> et la pertinence de leurs attributs label. Avec un lecteur d’écran : naviguez jusqu’au <select>, ouvrez-le, et vérifiez que le nom de chaque groupe est annoncé avant ses options. Sous NVDA avec Firefox, le nom du groupe est lu à l’entrée dans chaque section.
Dans quels cas un label d'<optgroup> vague comme « Autres » respecte-t-il le RGAA ?
Ça dépend. « Autres » est acceptable si la catégorie regroupe bien des éléments résiduels clairement distincts des autres groupes et que le terme est compréhensible dans le contexte. En revanche, s’il s’agit du seul groupe de la liste ou si son contenu peut être décrit plus précisément, le test 11.8.3 échoue. La règle : le label doit permettre à l’utilisateur de prédire ce qu’il va trouver dans le groupe.
Comment le critère RGAA 11.8 s'applique-t-il aux listes déroulantes custom en JavaScript ?
Oui. Si vous remplacez un <select> natif par un composant personnalisé avec role="listbox", les groupes d’options doivent être matérialisés par des éléments portant role="group" avec un aria-label pertinent. Cela réplique la sémantique de l’<optgroup> natif. L’obligation de pertinence du nom de groupe reste identique.