ARIA: option role
option role is used for selectable items in a
option role is used to identify selections a user can make in a
listbox. These options are similar to the
<option> elements in a
<select> element, but they can contain images.
All selectable options should have
aria-selected match their state,
true when selected and
false when not. If an option is not selectable,
aria-selected can be omitted. A disabled option can have
aria-selected="false" to communicate to the user that the option is present, albeit disabled.
option role is for identifying selectable choices of a
listbox. Options must be provided an accessible name. Generally, the accessible name for an option should come from the element's descendant content.
Authors can also explicitly provide an accessible name by specifying
aria-labelledby to the element with the
option role. If using
aria-labelledby, and the option also displays a visible text label, authors must ensure they adhere to WCAG Success Criterion 2.5.3 Label in Name.
It is highly recommended to use a
<select> element or an
<input> element with the
radio type instead, when possible. These native HTML elements provide keyboard interactivity to manage focus for all the descendants for you automatically.
All descendants are presentational
There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in a
option. To deal with this limitation, browsers, automatically apply role
presentation to all descendant elements of any
option element as it is a role that does not support semantic children.
For example, consider the following
option element, which contains a heading.
<div role="option"><h3>Title of my option</h3></div>
Because descendants of
option are presentational, the following code is equivalent:
<div role="option"><h3 role="presentation">Title of my option</h3></div>
From the assistive technology user's perspective, the heading does not exist since the previous code snippets are equivalent to the following in the accessibility tree:
<div role="option">Title of my option</div>
Associated ARIA roles, states, and properties
optionmust be contained in or owned by a
States and Properties
Used to describe the selection state of the option. Required.
Used to describe the checked state when options are used in a multiple selection fashion. Supports
Used to describe the position in the set of options when it does not match the DOM, such as virtual scrolling where only some options are present at a time. Optional.
Used in conjunction with
aria-posinsetto declare the total number of options. Optional.
Used to indicate that the option is present but not editable. Optional.
Used to hide the option from accessibility tools. It should only be used to hide non-visible content or visible content if it improves the experience of assistive technology, such as redundant content. Optional.
Used to indicate that the value of the option is considered invalid by the application. Optional.
Used to indicate that an element is being modified, such as while it is loadingOptional.
Used to indicate which element labels the option. The content of the option should be used instead where appropriate. Optional.
Used to label the option. If the label is present in the DOM,
aria-labelledbyshould be used instead. Optional.
(For further details and a full list of ARIA states and properties see the ARIA
option (role) documentation.)
|Accessible Rich Internet Applications (WAI-ARIA) |
|ARIA Authoring Practices |