label for optgroup

(Referring UWEM Test: 12.3_HTML_04)

Test info

Failure cause

The inspected optgroup element does not contain a label attribute.

You used an optgroup to group choices logically, but did not specify a label for this group using the label attribute.

Why this may be a barrier

"The optgroup element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options." W3: The select, optgroup, and option elements

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page with optgroup and LABEL-ATTRIBUTE</title></head>
<body>

<h1>Optgroup with label</h1>
<form>
<select name="Names" size="4">
<optgroup label="Names starting with A">
<option>Anna</option>
<option>Achim</option>
<option>August</option>
</optgroup>
<optgrouplabel="Names starting with B">
<option>Berta</option>
<option>Barbara</option>
<option>Bernhard</option>
</optgroup>
</select>
</form>

</body>
</html>

Solution

Add a context to the optgroup by specifying the label attribute.

References

Related WCAG 1.0 Checkpoint

12.3

"Divide large blocks of information into more manageable groups where natural and appropriate." [Priority 2]
WCAG 1.0 Checkpoint 12.3

Referring UWEM Test

12.3_HTML_04

This test is targeted to find optgroup elements without label.

Examples

  • Grouping selection options

    In this example the options of the selection-box are grouped logically.
    To indicate a meaning, every group must have a label, describing the group.

    Bad example:
    <body>
    <form action="evalForm.php" method="post">

    <select name="Names" size="4">
    <optgroup   >
    <option>Anna</option>
    <option>Achim</option>
    <option>August</option>
    </optgroup>
    <optgroup   >
    <option>Berta</option>
    <option>Barbara</option>
    <option>Bernhard</option>
    </optgroup>
    </select>

    </form>
    </body>
    Good example:
    <body>
    <form action="evalForm.php" method="post">

    <select name="Names" size="4">
    <optgroup label="Names starting with A">
    <option>Anna</option>
    <option>Achim</option>
    <option>August</option>
    </optgroup>
    <optgroup label="Names starting with B">
    <option>Berta</option>
    <option>Barbara</option>
    <option>Bernhard</option>
    </optgroup>
    </select>

    </form>
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide