7.2.2. Ordonner les options de manière logique dans les listes déroulantes

Lorsque des listes déroulantes sont utilisées, les options qu’elles contiennent doivent être ordonnées de manière logique.

L’ordre logique dépend du contexte, mais il peut s’agir notamment :

D’un ordre alphabétique (une liste de langues, par exemple).
D’un ordre numérique (une liste de départements, par exemple).
D’un ordre pratique (“France” en premier dans un formulaire d’inscription à un service français).

Astuce

Une bonne pratique d’accessibilité consiste à ne pas préfixer le contenu de la balise <option> avec des caractères décoratifs (tirets, étoiles, espaces, etc.).

Ceci afin de permettre un accès direct à une valeur ou à un groupe de valeurs souhaité, par simple pression d’une touche au clavier (pression sur la touche “I” pour atteindre le pays “Italie”, par exemple).

Ainsi :

<select>
    <option>--Allemagne</option>
    <option>--Belgique</option>
    <option>--Espagne</option>
    <option>--France</option>
    <option>--Italie</option>
</select>

Sera remplacé avantageusement par :

<select>
    <option>Allemagne</option>
    <option>Belgique</option>
    <option>Espagne</option>
    <option>France</option>
    <option>Italie</option>
</select>

Recommandations associées

Recommandation précédente : 7.2.1. Regrouper et titrer les champs de même nature avec <fieldset> et <legend>
Recommandation suivante : 7.3.1. Mettre à jour le <title> de la page quand un formulaire renvoie une erreur ou un message de confirmation