WAI-ARIA: Role=Option
A selectable item in a select list.
Description
A selectable item in a select list.
Authors MUST ensure elements with role option are contained in, or owned by, an element with the role listbox. Options not associated with a listbox might not be correctly mapped to an accessibility API.
Elements with the role option have an implicit aria-selected value of false.
Screen Reader Support For Role=Option
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its name | supported | supported | supported | supported | supported | supported | supported | supported | supported | partial (1/2) | partial (1/2) |
| MUST convey its role | supported | supported | supported | supported | supported | supported | supported | partial (1/2) | supported | supported | partial (1/2) |
| MUST convey the value of the option when used in a datalist context | supported | supported | supported | none | supported | supported | none | none | supported | supported | none |
| MAY convey information about the position the option in the list | partial (1/2) | partial (1/2) | supported | supported | supported | supported | supported | none | none | some partial support | none |
Role=Option Examples
HTML Example 1
<input type="text" aria-label="Tag" role="combobox" aria-expanded="true"
aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>HTML Example 2
A page contains a combobox composed of a textbox and a dropdown list of values which the user may choose from. The chosen list item becomes the value of the textbox. As the user navigates through the list via arrow keys, the aria-activedescendant property is adjusted to reflect the id attribute of the current child element which has been navigated to.
<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true"
aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit">
<ul aria-expanded="true" role="listbox" id="cb1-list">
<li role="option" id="cb1-opt1">Alabama</li>
<li role="option" id="cb1-opt2">Alaska</li>
<li role="option" id="cb1-opt3">American Samoa</li>
<li role="option" id="cb1-opt4">Arizona</li>
<li role="option" id="cb1-opt5">Arkansas</li>
<li role="option" id="cb1-opt6">California</li>
<li role="option" id="cb1-opt7">Colorado</li>
</ul>Characteristics
Superclass Role
- input
Subclass Role
- treeitem
Base Concept
- HTML option
Related Concepts
- listitem
Required Context Role
- listbox
Required States and Properties
- aria-selected
Supported States and Properties
- aria-checked
- aria-posinset
- aria-setsize
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- contents
- author
Accessible Name Required
- True
Children Presentational
- True
Implicit Value for Role
- Default for aria-selected is false.
Semantic HTML
Use the HTML <option> tag.
<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=option. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=option.
