--- title: 'ARIA: option role' slug: Web/Accessibility/ARIA/Roles/option_role tags: - ARIA - Accessibility ---

The option role is used for selectable items in a listbox.

Description

The option role is used to identify selections a user can make in a listbox. These options are similar to the {{HTMLElement('option')}} elements in a {{HTMLElement('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 either omit the aria-selected option and be removed from the focus order, or mark aria-disabled as true andzzzzzzzzzzzzzzzzz aria-selected as false to show the user that the option is present, albeit disabled.

The 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-label or aria-labelledby to the element with the option role. If using aria-label or 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 {{HTMLElement('select')}} element or an {{HTMLElement('input')}} element with the checkbox or radio type instead, when possible. These native HTML elements provide keyboard interactivity to manage focus for all the descendants for you automatically.

Associated ARIA roles, states, and properties

Associated Roles

listbox
An option must be contained in or owned by a listbox

States and Properties

aria-selected
Used to describe the selection state of the option. Required.
aria-checked
Used to describe the checked state when options are used in a multiple selection fashion. Supports true, false and mixed. Optional.
aria-posinset
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.
aria-setsize
Used in conjunction with aria-posinset to declare the total number of options. Optional.
aria-disabled
Used to indicate that the option is present but not editable. Optional.
aria-hidden
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.
aria-invalid
Used to indicate that the value of the option is considered invalid by the application. Optional.
aria-busy
Used to indicate that an element is being modified, such as while it is loadingOptional.
aria-labelledby
Used to indicate which element labels the option. The content of the option should be used instead where appropriate. Optional.
aria-label
Used to label the option. If the label is present in the DOM, aria-labelledby should be used instead. Optional.

(For further details and a full list of ARIA states and properties see the ARIA option (role) documentation.)

Specifications

Specification Status
{{SpecName("ARIA","#option","ARIA option role")}} {{Spec2('ARIA')}}
{{SpecName("ARIA Authoring Practices","#Option","Option Role")}} {{Spec2('ARIA Authoring Practices')}}

See also