Semantics

An item in a listbox.

Additional info from the ARIA specification

Authors MUST ensure elements with role option are accessibility children of an element with role listbox or of an element with role group that is the accessibility child of an element with role listbox. Options not associated with a listbox might not be correctly mapped to an accessibility API.

In certain conditions, a user agent MAY provide an implicit value for aria-selected for each option in a listbox, and if it does, the user agent MUST ensure the following conditions are met before providing an implicit value:

If a user agent provides an implicit aria-selected value for an option, the value SHOULD be true if the option has DOM focus or the listbox has DOM focus and the option is referenced by aria-activedescendant. Otherwise, if a user agent provides an implicit aria-selected value for an option, the value SHOULD be false.

Authors SHOULD indicate selection for option elements using one of the following:

Authors SHOULD NOT specify both aria-selected and aria-checked on option elements contained by the same listbox except in the extremely rare circumstances where all the following conditions are met:

Abstract Role

  • WidgetRepresents a focusable, interactive element.

Content Category

Only Used with Specific Parent Roles

This role must be a direct descendant of one of the following roles:

  • listbox
  • group

Allowed Descendants

Phrasing Children Allowed

No interactive content descendants, and no descendants with a tabindex attribute specified.

Note

Children Become Presentational

Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.

Usage

Allowed HTML elements

Implicit semantics

These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.

  • option

Explicitly allowed

  • a­[href][role=option]
  • button[role=option]
  • img[role=option]
  • input­[type=­checkbox][role=option]

Elements that can have any role

  • abbr[role=option]
  • address[role=option]
  • b[role=option]
  • blockquote[role=option]
  • canvas[role=option]
  • cite[role=option]
  • code[role=option]
  • custom-element[role=option]
  • data[role=option]
  • del[role=option]
  • dfn[role=option]
  • div[role=option]
  • em[role=option]
  • figure[role=option]
  • i[role=option]
  • ins[role=option]
  • kbd[role=option]
  • mark[role=option]
  • output[role=option]
  • p[role=option]
  • pre[role=option]
  • q[role=option]
  • samp[role=option]
  • small[role=option]
  • span[role=option]
  • table[role=option]
  • tbody[role=option]
  • tfoot[role=option]
  • thead[role=option]
  • time[role=option]
  • u[role=option]
  • var[role=option]