Optgroup for Accessibility

Earlier developers use 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 and not screen reader friendly making them completely inaccessible.

Thanks to HTML5 for introducing <optgroup> tag which can be used to group the elements in a drop down without much effort  and it is 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.

 

Attributes available for optgroup tag
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=”Fruits”>
<option value=”1″>Apple</option>
<option value=”2″>Banana</option>
<option value=”3″>Kiwi</option>
</optgroup>
<optgroup label=”Juices”>
<option value=”4″>Apple</option>
<option value=”5″>Banana</option>
<option value=”6″>Kiwi</option>
</optgroup>
<optgroup label=”Salads”>
<option value=”7″>Broccoli</option>
<option value=”8″>Cabbage</option>
<option value=”9″>Sprouts</option>
</optgroup>
</select>

Screen Reader Behaviour

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. Each screen reader announces the optgroup in its own way which is as following.

Screen reader behaviour for optgroup
SR + Browser SR behavior
JAWS 17 + IE 11 SR announces the option value along with its group name while using arrow keys.
Ex: Apple (Fruits), Banana(Fruits)
NVDA 2017.1 + FF 51 SR does not announce the group name when navigating using arrow keys. But by expanding options using space key, SR announces as “Fruits grouping – Apple 1 of 3 – Level 2” for each of the options when arrow keys are pressed.
Chromevox 53 + Chrome 56 SR does not support optgroup and announces them as a normal select box.
Voiceover iOS9 + Safari SR announces the group name along with options on swiping from left to right. SR appends the word ‘heading’ for group names (Fruits, Juices…).
Ex: Fruits Heading, Apple, Banana, KIWI, Juices heading…
Talkback V6.0 + FF SR announces the group name along with options on swiping from left to right. But SR appends the word ‘disabled’ for group names (Fruits, Juices…).
Ex: Fruits disabled, Apple, Banana, KIWI, Juices disabled…

Examples & Reference:

  1. WCAG 2.0 Techniques External Website
  2. W3Schools Optgroup External Website

Comments are closed.