Optgroup Accessibility

Earlier developers used to customize the html tags like div, ul, and li in order to group the related elements in a drop-down list. Most of such customized widgets are not keyboard accessible as well not screen reader friendly making them completely inaccessible.

Thanks to HTML5 for introducing <optgroup> tag which can be used to group the elements easily for developers without much effort as well as pretty much accessible for keyboard and screen reader users.

Optgroup is used to group the options in a selection list. Instead of having long list of options in a selection list, grouping them together helps user to handle them easily. Optgroup should be coded inside a <select> tag.

Nested grouping is not possible with optgroup tag. It mainly supports two attributes “label” and “disabled”. If an optgroup has the attribute “disabled”, then the particular options will be greyed out by few browsers and users cannot select the options either with keyboard or mouse.

Attribute	Description
Label	To name the group of options inside the drop-down list.
disabled	Indicates whether the items present in group are selectable or not.

Sample Code

<label for="food">what is your favorite food? </label>
<select id="food" name="food">

<optgroup label="Juices">    

 <option value="1">Apple</option>

 <option value="2">Banana</option>

 <option value="3">Kiwi</option>

</optgroup>

<optgroup label="Fruits">
 <option value="4">Apple</option>
 <option value="5">Banana</option>
 <option value="6">Kiwi</option>
</optgroup>
<optgroup label="Salads" disabled>
 <option value="7">Broccoli</option>
 <option value="8">Cabbage</option>
 <option value="9">Sprouts</option>
</optgroup>      

</select>

Screen Reader Behavior:

Screen reader announces the label along with the option value for the user. If an option group is having disabled attribute then screen reader will not announce them at all.

Screen Reader + Browser	SR behavior
JAWS 17 + IE 11	SR announces the option value along with label name. Ex: Apple (Fruits), Banana(Fruits)
NVDA 2015 + FF 47	SR does not announce the label when options are not expanded. But when user hits space key, the options list expands and SR announces as Fruits grouping – Apple 1 of 3 – Level 2 for each of the options.
Voiceover iOS9 + Safari	Screen reader appends the word ‘heading’ for labels (Fruits, Juices…) Ex: Fruits Heading, Apple, Banana
Talkback V6.0 + FF	Screen reader appends the word ‘disabled’ for labels (Fruits, Juices…) Ex: Fruits disabled, Apple, Banana.

Examples & Reference:

1.      https://www.w3.org/TR/WCAG20-TECHS/H85.html