<optgroup> within <select>
← Return to main list
This is a test case designed to determine how the <optgroup> element is announced by various screen readers.
Example
Code
<div>
<label for="suburb">Suburb</label>
<select id="suburb">
<option value="">Choose an option</option>
<optgroup label="Suburbs beginning with A">
<option value="Abbotsbury">Abbotsbury</option>
</optgroup>
<optgroup label="Suburbs beginning with B">
<option value="BadgerysCreek">Badgerys Creek</option>
</optgroup>
</select>
</div>
Assistive technologies
VoiceOver
- Chrome: Suburb beginning with A. Dimmed.
- Firefox: [Optgroup not announced]
- Safari: Suburb beginning with A. Dimmed.
NVDA
- Chrome: [Optgroup not announced]
- Firefox: Suburbs beginning with A. Grouping. Abbotsbury. 1 of 3. Level 2. [Optgroup only announced with select expanded, and when choosing an option directly below]
- Edge: [Optgroup not announced]
JAWS
- Chrome: [Optgroup not announced]
- Firefox: Abbotsbury. Suburbs beginning with A. [Optgroup only announced with select expanded, and when choosing an option directly below]
- Edge: [Optgroup not announced]
← Return to main list