Logically organize the items of dropdown lists

When dropdown lists are used, the items listed should be organized logically.

The logical order depends on the context. Examples include:

  • Alphabetical order (e.g. a list of languages).
  • Numbered order (e.g. a list of French departments).
  • Practical order (“France” first in form to sign up for a French government agency).

Tip

Another good accessibility practice is to avoid prefixing the content of the <option> tag with decorative characters (dashes, stars, spaces, etc.).

This will give the user direct access to a desired value or group of values by simply pressing a key on the keyboard (pressing the S key to reach the country “Spain”, for example).

<select>
   <option>--Belgium</option>
   <option>--France</option>
   <option>--Germany</option>
   <option>--Italy</option>
   <option>--Spain</option>
</select>

Should be replaced by:

<select>
   <option>Belgium</option>
   <option>France</option>
   <option>Germany</option>
   <option>Italy</option>
   <option>Spain</option>
</select>

1 comment

  • Par Franck Letrouvé, le 27 July 2020 at 14h02.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    La mention “Une bonne pratique d’accessibilité consiste à ne pas préfixer le contenu de la balise” est affichée en français dans la page.

    Répondre

Add a comment

All fields are mandatory.

Back to top