The <optgroup> Element
As defined in the HTML Living Standard, the <optgroup> element represents a group of <option> elements with a common label.
<select>
<optgroup label="Category Name">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
</select>
View HTML Living Standard: The optgroup element
Technical Requirements
- The
labelAttribute: This attribute is mandatory. It provides the name of the group, which is displayed in the menu but cannot be selected by the user. - Children: It must only contain
<option>elements or script-supporting elements (like<template>). - The
disabledAttribute: Adding this to the<optgroup>will natively disable all options within that group.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
For long select lists, grouping related options is an essential usability and accessibility practice. Screen readers announce the group label when a user navigates into it, providing the necessary context to distinguish between identical or similar options (e.g., distinguishing "Springfield" in Illinois vs. "Springfield" in Massachusetts).
Understand SC 1.3.1: Info and RelationshipsCognitive Benefits
Long, unstructured lists are difficult for all users to process, but they are a major barrier for users with **cognitive or memory impairments**.
- Chunking: By breaking a list into logical chunks using
<optgroup>, you reduce the mental effort required to find the correct item. - Visual Hierarchy: Browsers automatically indent options within a group, providing a clear visual structure that mirrors the programmatic one.
A11y Tip: Beyond the Group
If a select list becomes too large (e.g., hundreds of items), consider if a searchable autocomplete field (using <datalist>) or a multi-step selection process might be more accessible than a single massive dropdown.