Option groups must have a label

Rule optgroup-label · Forms · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An visually separates related options, but without a label the grouping is announced as nothing: screen-reader users hear one undifferentiated list and lose the structure sighted users see.

How to fix#

Add label="…" (or aria-label) to each , describing what the grouped options have in common.

Example#

<select><optgroup><option>UTC+1</option></optgroup></select>

<select><optgroup label="Europe"><option>UTC+1</option></optgroup></select>

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Info and Relationships