7.2.2. Order drop-down list options in a logical way

When drop-down lists are used, the options they contain must be ordered logically.

The logical order depends on the context, but it may be:

Alphabetical order (a list of languages, for example).
Numerical order (a list of rankings, for example).
Practical order (“United Kingdom” in first place for a registration form for a British service).

Tip

It is a good accessibility practice to avoid using decorative characters (dashes, asterisks, spaces, etc.) as prefixes of the content of the <option> tag.

Their absence enables users to directly access the required value or group of values, by simply pressing the corresponding key on the keyboard (pressing the “I” key to go to “Italy”, for example).

Therefore:

<select>
    <option>--Austria</option>
    <option>--Belgium</option>
    <option>--England</option>
    <option>--France</option>
    <option>--Italy</option>
</select>

Should be replaced by:

<select>
    <option>Austria</option>
    <option>Belgium</option>
    <option>England</option>
    <option>France</option>
    <option>Italy</option>
</select>

Previous recommendation: 7.2.1. Group and title fields of the same type with <fieldset> and <legend>
Next recommendation: 7.3.1. Update the page <title> when a page returns an error or a confirmation message

7.2.2. Order drop-down list options in a logical way

Related recommendations