WAI-ARIA: aria-selected (State)

Description

Indicates the current “selected” state of various widgets. See related aria-checked and aria-pressed.

This attribute is used with single-selection and multiple-selection widgets:

Single-selection containers where the currently focused item is not selected. The selection normally follows the focus, and is managed by the user agent.

Multiple-selection containers. Authors SHOULD ensure that any selectable descendant of a container in which the aria-multiselectable attribute is true specifies a value of either true or false for the aria-selected attribute.

Any explicit assignment of aria-selected takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies MAY convey implicit selection which follows the keyboard focus of the managed focus widget. If any DOM element in the widget is explicitly marked as selected, the user agent MUST NOT convey implicit selection for the widget.

Browser Compatibility For aria-selected

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
ariaSelected	ChromeFull support81	EdgeFull support81	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support68	SafariFull support12.1	WebView AndroidFull support81	Chrome AndroidFull support81	Firefox for AndroidNo supportNo	Opera AndroidFull support58	Safari on iOSFull support12.2	Samsung InternetFull support13.0

Screen Reader Support For aria-selected

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST convey undefined value by indicating that the element is not selectable	supported	supported	supported	supported	supported	supported	none	supported	supported	supported	supported
MUST convey false value by indicating that the element can be selected	none	none	none	none	supported	supported	supported	none	none	none	none
MUST convey true value by indicating that the element is currently selected	partial (1/2)	partial (1/2)	none	supported	none	none	none	none	partial (1/2)	none	partial (1/2)
MUST convey changes to aria-selected value	none	none	none	supported	supported	supported	none	none	partial	none	none

aria-selected Example

<div class="tab-interface">
  <div role="tablist" aria-label="Sample Tabs">
    <span
      role="tab"
      aria-selected="true"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0">
      First Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1">
      Second Tab
    </span>
    <span
      role="tab"
      aria-selected="false"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1">
      Third Tab
    </span>
  </div>
  <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    <p>Content for the first panel</p>
  </div>
  <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    <p>Content for the second panel</p>
  </div>
  <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
    <p>Content for the third panel</p>
  </div>
</div>

Characteristics

Used in Roles

• gridcell
• option
• row
• tab

Inherits into Roles

• columnheader
• rowheader
• treeitem

Value

• true/false/undefined:
  Value representing true, false, or not applicable. For example, an element with aria-expanded set to false is not currently expanded; an element with aria-expanded set to undefined is not expandable. The default value for this value type is undefined unless otherwise specified.
• false
  • The selectable element is not selected.
• true
  • The selectable element is selected.
• undefined (default)
  • The element is not selectable.

Semantic HTML

Use the HTML “selected” attribute.

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

Reference

• W3C (opens new window)
• A11Y Support
• MDN Web Docs