Group options elements inside a select

Compliance Data & User Impact

User Impact: Major

60% Complete

Disabilities Affected:

  • blindness
  • deaf blindness
  • motor disability

WCAG Version:
2

WCAG Levels:

  • A

WCAG Guidelines:

Solution Techniques:

Automated Test Accuracy:
Medium

Check1st Severity:
3

DRRSAG Designations:

  • relationship

How to Fix the Problem

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.

The Algorithm, in Simple Terms

Engine scans select elements for optgroup elements

Why Is it Important?

Grouping options together using the optgroup element allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.

Code Example


<form action="http://example.com/prog/someprog" method="post">
<label for="id_example_food">What is your favorite food?</label>
<select id="id_example_food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form>

This element perfoms as a container, and has no functionality. This container may contain another elements that has functionality or logical role.

Ignore this issue if this element has an alternative that performs the same and overrides the content of this element.