H85Usar optgroup para agrupar elementos option dentro de un select

Aplicabilidad

Páginas HTML que recogen datos introducidos por el usuario.

Descripción

El objetivo de esta técnica es agrupar los elementos de una lista de selección. Una lista de selección es un conjunto de valores permitidos para un control de formulario, como una lista de selección múltiple o un cuadro combinado. Con frecuencia, las listas de selección contienen grupos de opciones relacionadas. Esos grupos deben identificarse semánticamente, en lugar de delimitarse con entradas «falsas» en la lista, por ejemplo: un elemento option que solo contiene una serie de guiones para crear una línea horizontal. Identificar semánticamente los grupos de opciones ayuda a dividir visualmente las listas largas, de modo que los usuarios puedan localizar con más facilidad lo que les interesa.

En HTML, el elemento select se utiliza para crear tanto listas de selección múltiple como cuadros combinados. Cada una de las opciones permitidas se indica con un elemento option. Para agrupar opciones, utilice el elemento optgroup con los elementos option relacionados dentro de él. Etiquete el grupo con el atributo label para que los usuarios sepan qué van a encontrar dentro del grupo.

El elemento optgroup debe estar directamente dentro del elemento select, y los elementos option directamente dentro del optgroup. Es posible que un elemento select contenga a la vez elementos option sueltos y grupos optgroup, aunque quien desarrolla debería plantearse si eso es realmente lo que pretende al utilizarlo. No es posible anidar el elemento optgroup, por lo que dentro de un select solo puede haber un nivel de agrupación.

Si la información de agrupación es esencial para comprender la lista, quien desarrolla puede definir etiquetas de option que se entiendan incluso cuando el lector de pantalla no presente la información de agrupación que proporciona optgroup.

Ejemplos

<form action="/favorite-food/" method="post">
  <label for="food">What is your favorite food?</label>
  <select id="food" name="food">
    <optgroup label="Fruits">
      <option value="1">Apples</option>
      <option value="2">Bananas</option>
      <option value="3">Peaches</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option value="4">Broccoli</option>
      <option value="5">Carrots</option>
      <option value="6">Cucumbers</option>
    </optgroup>
    <optgroup label="Baked Goods">
      <option value="7">Apple Pie</option>
      <option value="8">Bagels</option>
      <option value="9">Chocolate Cake</option>
    </optgroup>
   </select>
</form>

<form action="/animals/" method="post">
  <label for="animals">Pick your favorite animals:</label>
  <select id="animals" multiple name="animals" size="10">
    <optgroup label="Dinosaurs">
      <option value="brontosaurus">Brontosaurus</option>
      <option value="pterodactyl">Pterodactyl</option>
      <option value="trex">Tyrannosaurus Rex</option>
      <option value="velociraptor">Velociraptor</option>
    </optgroup>
    <optgroup label="Ungulates">
      <option value="camel">Camel</option>
      <option value="giraffe">Giraffe</option>
      <option value="hippo">Hippo</option>
      <option value="horse">Horse</option>
      <option value="zebra">Zebra</option>
    </optgroup>
    <optgroup label="Household Pets">
      <option value="cat">Cat</option>
      <option value="dog">Dog</option>
      <option value="fish">Fish</option>
      <option value="rabbit">Rabbit</option>
    </optgroup>
  </select>
</form>

Pruebas

Recursos

• HTML: elemento select.
• HTML: elemento optgroup.
• HTML: elemento option.
• WebAIM - Creating Accessible Forms (creación de formularios accesibles).