4.1.5 Les regroupements d'éléments dans une liste déroulante se font avec <optgroup>

Lorsque les éléments d'une liste déroulante sont regroupés, ils doivent l'être au moyen de l'élément optgroup.

Pourquoi?

Cette directive est une application de l'utilisation de la sémantique. Lorsque le regroupement d'éléments est effectué au moyen d'une balise structurante, il sera annoncé correctement par les navigateurs et lecteurs d'écran.

En pratique

Une liste déroulante (<select> ou <select multiple="multiple" />) contient une série de valeurs permises (<option>'s) parmi lesquelles le visiteur peut en choisir une ou plusieurs.

AnySurfer n'impose pas de regrouper les éléments de la liste (<option>) , mais demande d'utiliser l'élément optgroup si vous choisissez de regrouper des éléments.

Il n'est pas permis de séparer des groupes avec une <option> fictive (dummy).

Exemple d'utilisation d'options fictives (pratique incorrecte)

<form>
    <label for="snack1">Quelle est ta collation préférée?</label>
    <select id="snack1" name="snack1">
        <option value="0">&mdash; Fruit &mdash;</option>
        <option value="1">Pomme</option>
        <option value="2">Poire</option>
        <option value="3">Banane</option>
        <option value="0">&mdash; Sucrerie &mdash;</option>
        <option value="4">Chocolat</option>
        <option value="5">Bonbon</option>
        <option value="6">Popcorn</option>
        <option value="0">&mdash; Patisserie &mdash;</option>
        <option value="7">Gateau au chocolat</option>
        <option value="8">Brownie</option>
        <option value="9">Gaufre au sucre</option>>
   </select>
</form>

Exemple de l'utilisation de optgroup (pratique correcte)

<form>
    <label for="snack2">Quelle est ta collation préférée?</label>
    <select id="snack2" name="snack2">
      <optgroup label="Fruit">
        <option value="1">Pomme</option>
        <option value="2">Poire</option>
        <option value="3">Banane</option>
      </optgroup>
      <optgroup label="Sucrerie">
        <option value="4">Chocolat</option>
        <option value="5">Bonbon</option>
        <option value="6">Popcorn</option>
     </optgroup>
     <optgroup label="Patisserie">
        <option value="7">Gateau au chocolat</option>
        <option value="8">Brownie</option>
        <option value="9">Gaufre au sucre</option>
     </optgroup>
   </select>
</form>