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

ARIA Pressed

Aria-pressed is one of the states and properties of ARIA which is generally used for toggle buttons to inform the state of the toggle button. It indicates the state of the toggle buttons whether the button is pressed or not. Aria-pressed should only be used for toggle buttons. It should not be used for form submit buttons or buttons which opens a modal window.

Aria-pressed has three states: True, False, Mixed. 

Attribute	Description
aria-pressed=”true”	The button is a toggle button which is pressed
aria-pressed=”false”	The button is a toggle button which is not pressed
aria-pressed=”mixed”	Mixed value for tri-state toggle button

For a toggle button which is not pressed, developers should provide aria-pressed=”false” by default. Once user clicks/activates the button with mouse or keyboard, then developer should change the value to TRUE (aria-pressed=”true”).

Note: aria-pressed should be used only for toggle buttons. It should not be used at all for normal buttons which do not have toggle functionality.

Sample Code

Toggle button not pressed : <input type=”submit” value=”Bold” aria-pressed=”false” />

Toggle button pressed : <input type=”submit” value=”Bold” aria-pressed=”true” />

Not a toggle button : <input type=”submit” value=”Bold” />

Screen Reader Behavior:

Screen Reader + Browser	Aria-pressed state	SR behavior
JAWS 17 + IE 11	True	Bold Toggle button pressed
JAWS 17 + IE 11	False	Bold Toggle button
NVDA 2015 + FF 47	True	Bold Toggle button pressed
NVDA 2015 + FF 47	False	Bold Toggle button
Voiceover iOS9 + Safari	True	Bold Toggle button pressed Double tap to toggle setting
Voiceover iOS9 + Safari	False	Bold Toggle button not pressed Double tap to toggle setting
Talkback V6.0 + Chrome	True	Bold Toggle button ticked double tap to toggle
Talkback V6.0 + Chrome	False	Bold toggle button not ticked double tap to toggle

Examples & Reference:

1.      http://www.oaa-accessibility.org/examplep/button1/

2.      https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed