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.
|label||To name the group of options inside the drop-down list.|
|disabled||Indicates whether the items present in group are selectable or not.|
<label for=”food”>what is your favorite food? </label>
<select id=”food” name=”food”>
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.
|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…