Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Forms

Option Groups

Like other form elements menus must be labelled for accessibility. For simple menus this is trivial:

The code:

<select name="Class Standing">

<option label="Select Class">Select Class</option>

<option label="Freshman">Freshman</option>

<option label="Sophomore">Sophomore</option>

<option label="Junior">Junior</option>

<option label="Senior">Senior</option>

<option label="Graduate">Graduate</option>

</select>

 

When a menu is longer there might be a need for logical divisions to help the user understand the menu more fully. The Option Group is used to divide menus into groups of select elements. This is accomplished via the optgroup tag. In addition to labeling the parts of the menu for accessibility purposes the label used in the optgroup tag also provides section headings within the menu:

Here is an example used in a menu:

The code:

<select name="operating_system">

<option label="Select an OS">Select an OS</option>

<optgroup label="Windows">

<option label="Windows XP">Windows XP</option>

<option label="Windows Vista">Windows Vista</option>

<option label="Windows 7">Windows 7</option>

</optgroup>

<optgroup label="Mac OS">

<option label="10.4 Tiger">Mac OS 10.4: Tiger</option>

<option label="10.5 Leopard">Mac OS 10.5: Leopard</option>

<option label="10.6 Snow Leopard">Mac OS 10.6: Snow Leopard</option>

</optgroup>

</select>

Next Section: Buttons