Skip to content

Technique H85:Using optgroup to group option elements inside a select

About this Technique

This technique relates to 1.3.1: Info and Relationships (Sufficient when used for making information and relationships conveyed through presentation programmatically determinable).

This technique applies to HTML pages that collect user input.

Description

The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an option element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.

In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the label attribute so users will know what to expect inside the group.

The optgroup element should be directly inside the select element, and the option elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.

If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.

Examples

Example 1

The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

<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>

Example 2

The following example shows how a multi-select box can make use of the optgroup element.

<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>

Related Resources

No endorsement implied.

Tests

Procedure

  1. Check the set of options within a selection list to see if there are groups of related options.
  2. If there are groups of related options, they should be grouped with optgroup.

Expected Results

  • Check #2 is true.
Back to Top